Icons,Add&Delete Product, Buttons,Color Indicator

src/components/Icons/AddIcon/AddIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function AddIcon(props: props) {
+  return (
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" width={props.size + "vh"} height={props.size + "vh"} viewBox="0 0 24 24" fill="none" stroke={props.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 5v14M5 12h14" />
+      </svg>
+    </div>
+  );
+}

src/components/Icons/CancelIcon/CancelIcon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+
+export default function CancelIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={props.size + "vh"}
+        height={props.size + "vh"}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={props.color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M7.5 7.5l9 9M16.5 7.5l-9 9" />
+      </svg>
+    </div>
+  );
+}

src/components/Icons/DeleteIcon/DeleteIcon.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function DeleteIcon(props: props) {
+  return (
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" width={props.size + "vh"} height={props.size + "vh"} viewBox="0 0 24 24" fill="none" stroke={props.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 7h16M5 10v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V10" />
+        <path d="M10 10v-3a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3" />
+        <path d="M9 7h6" />
+      </svg>
+    </div>
+  );
+}

src/components/Icons/EditIcon/EditIcon.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function EditIcon(props: props) {
+  return (
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" width={props.size + "vh"} height={props.size + "vh"} viewBox="0 0 24 24" fill="none" stroke={props.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3 17l-1.557 -4.386a2 2 0 0 1 1.923 -2.614h12.268a2 2 0 0 1 1.923 2.614l-1.558 4.386" />
+        <path d="M15 6h6v6" />
+        <path d="M10 21h5" />
+        <path d="M12 17v-5" />
+        <path d="M9 6h-6v15a2 2 0 0 0 2 2h15v-6" />
+      </svg>
+    </div>
+  );
+}

src/components/ProductInfo/ProductInfo.tsx

@@ -1,6 +1,10 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import { ProductType } from '../ProductType/ProductType';
 import { useNavigate } from 'react-router-dom';
+import styles from '../../styles';
+import EditIcon from "../../Components/Icons/EditIcon/EditIcon";
+import DeleteIcon from "../../Components/Icons/DeleteIcon/DeleteIcon";
+import ProductsLists from "../../Components/ProductsLists/ProductsLists";
 
 type ProductInfoProps = {
   products: ProductType[];
@@ -15,7 +19,20 @@ export default function ProductInfo(props: ProductInfoProps) {
   };
 
   const handleDelete = (id: number) => {
+    const newProductsList = products.filter(product => product.id !== id);
     console.log(`Deleting product with ID ${id}`);
+    console.log(newProductsList); // optional, to check that the product was removed from the array
+    ProductsLists.splice(id-1, 1,);
+  };  
+
+  const getStocksColor = (stocks: number) => {
+    if (stocks >= 10) {
+      return 'green';
+    } else if (stocks >= 4) {
+      return 'orange';
+    } else {
+      return 'red';
+    }
   };
 
   return (
@@ -31,13 +48,40 @@ export default function ProductInfo(props: ProductInfoProps) {
         </TableHead>
         <TableBody>
           {products.map((product) => (
-            <TableRow key={product.id}>
+            <TableRow
+              key={product.id}
+              style={{
+                backgroundColor: getStocksColor(product.stocks),
+              }}
+            >
               <TableCell style={{ color: 'white' }}>{product.id.toString().padStart(3, '0')}</TableCell>
               <TableCell style={{ color: 'white' }}>{product.name}</TableCell>
               <TableCell style={{ color: 'white' }}>{product.lastModified}</TableCell>
               <TableCell style={{ color: 'white' }}>
-                <button onClick={() => handleEdit(product.id)}>Edit</button>
-                <button onClick={() => handleDelete(product.id)}>Delete</button>
+                <div style={{ display: "flex", gap: 8 }}>
+                  <button onClick={() => handleEdit(product.id)}
+                    style={{
+                    ...styles.button_primary,
+                    display: "flex",
+                    alignItems: "center",
+                    backgroundColor: "transparent",
+                    borderRadius: 50,
+                  }}>
+                  <EditIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Edit</span>
+                  </button>
+                  <button onClick={() => handleDelete(product.id)}
+                    style={{
+                    ...styles.button_primary,
+                    display: "flex",
+                    alignItems: "center",
+                    backgroundColor: "transparent",
+                    borderRadius: 50,
+                  }}>
+                  <DeleteIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Delete</span>
+                  </button>
+                </div>
               </TableCell>
             </TableRow>
           ))}

src/components/ProductsLists/ProductsLists.tsx

@@ -3,19 +3,19 @@ const ProductsLists = [
       id: 1,
       name: 'Product 1',
       stocks: 10,
-      lastModified: '2022-02-24'
+      lastModified: '3/2/2023, 2:11:45 PM'
     },
     {
       id: 2,
       name: 'Product 2',
       stocks: 5,
-      lastModified: '2022-02-23'
+      lastModified: '3/2/2023, 2:21:23 PM'
     },
     {
       id: 3,
       name: 'Product 3',
       stocks: 15,
-      lastModified: '2022-02-25'
+      lastModified: '3/2/2023, 1:35:56 PM'
     },
     // add more products here
   ];