From 38cd7fe1fa1469e0bcb7f65ca10e07113c40281a Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Fri, 17 Feb 2023 22:11:55 +0800
Subject: [PATCH] Added initial Products page

---
 .../ProductListEntry/ProductListEntry.tsx     | 47 +++++++++++++++++++
 src/routes/Dashboard/Dashboard.tsx            |  5 --
 src/routes/Products/Products.tsx              | 11 ++++-
 3 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ProductListEntry/ProductListEntry.tsx

diff --git a/src/components/ProductListEntry/ProductListEntry.tsx b/src/components/ProductListEntry/ProductListEntry.tsx
new file mode 100644
index 0000000..cfb6f30
--- /dev/null
+++ b/src/components/ProductListEntry/ProductListEntry.tsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from "react";
+
+export interface props {
+  children: React.ReactNode;
+}
+
+export default function ProductListEntry(props: props) {
+  const [size, setSize] = useState(64);
+
+  useEffect(() => {
+    function onEnter() {
+      setSize(256);
+    }
+    function onLeave() {
+      setSize(128);
+    }
+
+    document
+      .getElementById("container")
+      ?.addEventListener("mouseenter", onEnter);
+    document
+      .getElementById("container")
+      ?.addEventListener("mouseleave", onLeave);
+    return () => {
+      document
+        .getElementById("container")
+        ?.removeEventListener("mouseenter", onEnter);
+      document
+        .getElementById("container")
+        ?.removeEventListener("mouseleave", onLeave);
+    };
+  }, []);
+  return (
+    <div
+      id="container"
+      style={{
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#497f4d",
+        width: size,
+        height: size,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+}
diff --git a/src/routes/Dashboard/Dashboard.tsx b/src/routes/Dashboard/Dashboard.tsx
index 09f61a4..3127229 100644
--- a/src/routes/Dashboard/Dashboard.tsx
+++ b/src/routes/Dashboard/Dashboard.tsx
@@ -105,11 +105,6 @@ export default function Dashboard() {
             <h1 style={styles.text_small}>Added: 0</h1>
             <h1 style={styles.text_small}>Removed: 60</h1>
             <h1 style={styles.text_tiny}>02/17/2023</h1>
-            <div style={{ marginBottom: "2vh" }} />
-            <h1 style={styles.text}>Dan's Beefed Corn</h1>
-            <h1 style={styles.text_small}>Added: 32</h1>
-            <h1 style={styles.text_small}>Removed: 64</h1>
-            <h1 style={styles.text_tiny}>02/17/2023</h1>
           </DashboardContainer>
         </div>
       </div>
diff --git a/src/routes/Products/Products.tsx b/src/routes/Products/Products.tsx
index 79345bc..cfa3e8e 100644
--- a/src/routes/Products/Products.tsx
+++ b/src/routes/Products/Products.tsx
@@ -1,13 +1,20 @@
 import React from "react";
 import styles from "../../styles";
 import AppLogo from "../../Components/Icons/AppLogo/AppLogo";
+import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
+import ProductListEntry from "../../Components/ProductListEntry/ProductListEntry";
 
 export default function Products() {
   return (
     <div style={styles.container}>
+      <div style={styles.wrapper_row}>
+        <ProductsIcon size={8} color="white" />
+        <h1 style={styles.text_large}>Products</h1>
+      </div>
       <AppLogo size={8} color="#6f9b78" />
-      <p style={styles.text}>Ivy - Inventory Manager</p>
-      <p style={styles.text}>Products Page</p>
+      <ProductListEntry>
+        <p style={styles.text}>Beep Boop</p>
+      </ProductListEntry>
     </div>
   );
 }