Added initial Products page

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>
+  );
+}

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>

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>
   );
 }