From 2551b1fb38dfce2d5d15f3b228d79f49c8501ced Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Fri, 3 Mar 2023 12:15:10 +0800
Subject: [PATCH] Added icon to product blob view

---
 .../Icons/ProductIcon/ProductIcon.tsx         | 26 ++++++++++++++
 src/Components/Products/BlobView/BlobView.tsx |  7 +++-
 src/Routes/Products/Products.tsx              |  5 ++-
 .../InventoryInfo/InventoryInfo.tsx           | 35 -------------------
 src/components/ProductType/ProductType.tsx    |  7 ----
 .../ProductsLists/ProductsLists.tsx           | 24 -------------
 6 files changed, 36 insertions(+), 68 deletions(-)
 create mode 100644 src/Components/Icons/ProductIcon/ProductIcon.tsx
 delete mode 100644 src/components/InventoryInfo/InventoryInfo.tsx
 delete mode 100644 src/components/ProductType/ProductType.tsx
 delete mode 100644 src/components/ProductsLists/ProductsLists.tsx

diff --git a/src/Components/Icons/ProductIcon/ProductIcon.tsx b/src/Components/Icons/ProductIcon/ProductIcon.tsx
new file mode 100644
index 0000000..5ee36eb
--- /dev/null
+++ b/src/Components/Icons/ProductIcon/ProductIcon.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function ProductIcon(props: props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke={props.color}
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M7.05 11.293l4.243 -4.243a2 2 0 0 1 2.828 0l2.829 2.83a2 2 0 0 1 0 2.828l-4.243 4.243a2 2 0 0 1 -2.828 0l-2.829 -2.831a2 2 0 0 1 0 -2.828z"></path>
+      <path d="M16.243 9.172l3.086 -.772a1.5 1.5 0 0 0 .697 -2.516l-2.216 -2.217a1.5 1.5 0 0 0 -2.44 .47l-1.248 2.913"></path>
+      <path d="M9.172 16.243l-.772 3.086a1.5 1.5 0 0 1 -2.516 .697l-2.217 -2.216a1.5 1.5 0 0 1 .47 -2.44l2.913 -1.248"></path>
+    </svg>
+  );
+}
diff --git a/src/Components/Products/BlobView/BlobView.tsx b/src/Components/Products/BlobView/BlobView.tsx
index 3a0cbe0..4a3ab3c 100644
--- a/src/Components/Products/BlobView/BlobView.tsx
+++ b/src/Components/Products/BlobView/BlobView.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 
 import styles from "../../../styles";
 import { ProductList } from "../../../Interfaces/Interfaces";
+import ProductIcon from "../../Icons/ProductIcon/ProductIcon";
 
 export default function BlobView({ Products }: ProductList) {
   return (
@@ -19,7 +20,11 @@ export default function BlobView({ Products }: ProductList) {
             padding: 16,
           }}
         >
-          <p style={styles.text}>{row.name}</p>
+          <div style={styles.content_row}>
+            <ProductIcon size={4} color="white" />{" "}
+            <p style={styles.text}>{row.name}</p>
+          </div>
+
           <p style={styles.text}>ID: {row.id}</p>
           <p style={styles.text_small}>Last Modified: {row.last_modified}</p>
         </div>
diff --git a/src/Routes/Products/Products.tsx b/src/Routes/Products/Products.tsx
index bf51052..4fbc17d 100644
--- a/src/Routes/Products/Products.tsx
+++ b/src/Routes/Products/Products.tsx
@@ -42,7 +42,10 @@ export default function Products() {
           </div>
         </div>
       </div>
-      <Switch onClick={() => toggleTableView(!tableView)} />
+      <div style={styles.content_row}>
+        <Switch onClick={() => toggleTableView(!tableView)} />
+        <p style={styles.text_small}>View Type</p>
+      </div>
       {view()}
     </div>
   );
diff --git a/src/components/InventoryInfo/InventoryInfo.tsx b/src/components/InventoryInfo/InventoryInfo.tsx
deleted file mode 100644
index 43e3915..0000000
--- a/src/components/InventoryInfo/InventoryInfo.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
-import { ProductType } from '../ProductType/ProductType';
-
-type ProductInfoProps = {
-  products: ProductType[];
-};
-
-export default function InventoryInfo(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.toString().padStart(3, '0')}</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>
-  );
-}
diff --git a/src/components/ProductType/ProductType.tsx b/src/components/ProductType/ProductType.tsx
deleted file mode 100644
index 2ceafc8..0000000
--- a/src/components/ProductType/ProductType.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export type ProductType = {
-    id: number;
-    name: string;
-    stocks: number;
-    lastModified: string;
-  };
-
diff --git a/src/components/ProductsLists/ProductsLists.tsx b/src/components/ProductsLists/ProductsLists.tsx
deleted file mode 100644
index b66bd18..0000000
--- a/src/components/ProductsLists/ProductsLists.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-const ProductsLists = [
-    {
-      id: 1,
-      name: 'Product 1',
-      stocks: 10,
-      lastModified: '3/2/2023, 2:11:45 PM'
-    },
-    {
-      id: 2,
-      name: 'Product 2',
-      stocks: 5,
-      lastModified: '3/2/2023, 2:21:23 PM'
-    },
-    {
-      id: 3,
-      name: 'Product 3',
-      stocks: 15,
-      lastModified: '3/2/2023, 1:35:56 PM'
-    },
-    // add more products here
-  ];
-  
-  export default ProductsLists;
-  
\ No newline at end of file