Added toggle view for table or blob in Products page

src/Components/Products/BlobView/BlobView.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import styles from "../../../styles";
+import { ProductList } from "../../../Interfaces/Interfaces";
+
+export default function BlobView({ Products }: ProductList) {
+  return (
+    <div>
+      {Products.map((row) => (
+        <div
+          key={row.id}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            borderRadius: 16,
+            backgroundColor: "#1d3b33",
+            margin: 32,
+            lineHeight: 0,
+            padding: 16,
+          }}
+        >
+          <p style={styles.text}>{row.name}</p>
+          <p style={styles.text}>ID: {row.id}</p>
+          <p style={styles.text_small}>Last Modified: {row.last_modified}</p>
+        </div>
+      ))}
+    </div>
+  );
+}

src/Components/Products/TableView/TableView.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import styles from "../../../styles";
+import { ProductList } from "../../../Interfaces/Interfaces";
+
+export default function TableView({ Products }: ProductList) {
+  return (
+    <TableContainer
+      style={{
+        backgroundColor: "#1d3b33",
+        borderRadius: 8,
+      }}
+    >
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell style={styles.text}>Product ID</TableCell>
+            <TableCell style={styles.text}>Product</TableCell>
+            <TableCell style={styles.text}>Last Modified</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {Products.map((row) => (
+            <TableRow
+              key={row.id}
+              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+            >
+              <TableCell style={styles.text}>{row.id}</TableCell>
+              <TableCell style={styles.text}>{row.name}</TableCell>
+              <TableCell style={styles.text}>{row.last_modified}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}