Initial Products

src/components/ProductInfo/ProductInfo.tsx

@@ -0,0 +1,41 @@
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+
+type Product = {
+  id: number;
+  name: string;
+  stocks: number;
+  lastModified: string;
+};
+
+type ProductInfoProps = {
+  products: Product[];
+};
+
+export default function ProductInfo(props: ProductInfoProps) {
+  const { products } = props;
+
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell style={{ color: 'white' }}>Product ID</TableCell>
+            <TableCell style={{ color: 'white' }}>Product Name</TableCell>
+            <TableCell style={{ color: 'white' }}>Stocks</TableCell>
+            <TableCell style={{ color: 'white' }}>Last Modified</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {products.map((product) => (
+            <TableRow key={product.id}>
+              <TableCell style={{ color: 'white' }}>{product.id}</TableCell>
+              <TableCell style={{ color: 'white' }}>{product.name}</TableCell>
+              <TableCell style={{ color: 'white' }}>{product.stocks}</TableCell>
+              <TableCell style={{ color: 'white' }}>{product.lastModified}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

src/components/ProductsLists/ProductsLists.tsx

@@ -0,0 +1,18 @@
+const ProductsLists = [
+    {
+      id: 1,
+      name: 'Product 1',
+      stocks: 10,
+      lastModified: '2022-02-24'
+    },
+    {
+      id: 2,
+      name: 'Product 2',
+      stocks: 5,
+      lastModified: '2022-02-23'
+    },
+    // add more products here
+  ];
+  
+  export default ProductsLists;
+  

src/routes/Products/Products.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import styles from "../../styles";
 import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
+import ProductInfo from "../../Components/ProductInfo/ProductInfo";
+import ProductsLists from "../../Components/ProductsLists/ProductsLists";
+
 export default function Products() {
   return (
     <div style={{ margin: 32, height: "100%" }}>
@@ -8,6 +11,7 @@ export default function Products() {
         <ProductsIcon size={8} color="white" />
         <h1 style={styles.text_large}>Products</h1>
       </div>
+      <ProductInfo products={ProductsLists} />
     </div>
   );
 }