From 576a5bab9bb1c31cf551744c5115daaeae1d28c9 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Tue, 14 Feb 2023 20:29:42 +0800
Subject: [PATCH] Added routing structure and polished Dashboard

---
 src/App.tsx                        | 20 +++++++++++---------
 src/routes/Dashboard/Dashboard.tsx | 16 ++++++++++++++++
 src/styles.tsx                     | 28 +++++++++++-----------------
 3 files changed, 38 insertions(+), 26 deletions(-)
 create mode 100644 src/routes/Dashboard/Dashboard.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 7524daa..8dbfd5a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,17 @@
 import React from "react";
-import AppLogo from "./components/Icons/AppLogo/AppLogo";
-import styles from "./styles";
+import Dashboard from "./routes/Dashboard/Dashboard";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Dashboard />,
+  },
+]);
 export default function App() {
   return (
-    <div style={styles.background}>
-      <div style={styles.flex_row}>
-        <AppLogo size={64} color="#6f9b78" />
-        <p>Ivy - Inventory Manager</p>
-      </div>
-      <p>Welcome!</p>
-    </div>
+    <React.StrictMode>
+      <RouterProvider router={router} />
+    </React.StrictMode>
   );
 }
diff --git a/src/routes/Dashboard/Dashboard.tsx b/src/routes/Dashboard/Dashboard.tsx
new file mode 100644
index 0000000..a949c17
--- /dev/null
+++ b/src/routes/Dashboard/Dashboard.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import AppLogo from "../../components/Icons/AppLogo/AppLogo";
+import "../../index.css";
+import styles from "../../styles";
+
+export default function Dashboard() {
+  return (
+    <div style={styles.background}>
+      <div style={styles.container}>
+        <AppLogo size={64} color="#6f9b78" />
+        <p style={styles.text}>Ivy - Inventory Manager</p>
+        <p style={styles.text}>Welcome to the Dashboard</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/styles.tsx b/src/styles.tsx
index f53ea86..e61aefb 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -1,27 +1,21 @@
-import React from "react";
 const styles: { [key: string]: React.CSSProperties } = {
   background: {
     backgroundColor: "#0b2322",
-    height: "100vh",
     display: "flex",
     flexDirection: "column",
-    justifyContent: "center",
+    height: "100vh",
+  },
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
     alignItems: "center",
-    fontWeight: "bold",
+  },
+  text: {
+    fontSize: 16,
     color: "white",
-  },
-  flex_row: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  header: {
-    display: "flex",
-    flexDirection: "row",
-    position: "sticky",
-    top: 0,
-    left: 0,
+    fontWeight: "bold",
   },
 };
+
 export default styles;