From 2b5fe8171c0ba912aaa04c526ed0bf24e4eae0ee Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Fri, 17 Nov 2023 17:23:53 +0800
Subject: [PATCH] Added initial header

---
 src/Components/Header/Header.tsx          | 23 +++++++++++++++++++++++
 src/Components/LoginModal/LoginModal.tsx  |  2 +-
 src/Pages/DashboardPage/DashboardPage.tsx |  8 +++-----
 3 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 src/Components/Header/Header.tsx

diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
new file mode 100644
index 0000000..166208d
--- /dev/null
+++ b/src/Components/Header/Header.tsx
@@ -0,0 +1,23 @@
+import styles, { colors } from "../../styles";
+
+export interface props {
+  label: React.ReactNode;
+}
+
+export default function Header(props: props) {
+  return (
+    <div
+      style={{
+        position: "sticky",
+        top: 0,
+        zIndex: -1,
+        backgroundColor: colors.header_color,
+        display: "flex",
+        flexDirection: "column",
+        alignContent: "center",
+      }}
+    >
+      <p style={{ ...styles.text_light, ...styles.text_M }}>{props.label}</p>
+    </div>
+  );
+}
diff --git a/src/Components/LoginModal/LoginModal.tsx b/src/Components/LoginModal/LoginModal.tsx
index 3cf8c5a..48f16df 100644
--- a/src/Components/LoginModal/LoginModal.tsx
+++ b/src/Components/LoginModal/LoginModal.tsx
@@ -116,7 +116,7 @@ export default function LoginModal() {
         type={"dark"}
         label={"Login"}
         onClick={() => {
-          navigate(0);
+          navigate("/dashboard");
         }}
       />
     </>
diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx
index 15c4f96..72f9e61 100644
--- a/src/Pages/DashboardPage/DashboardPage.tsx
+++ b/src/Pages/DashboardPage/DashboardPage.tsx
@@ -1,13 +1,11 @@
+import Header from "../../Components/Header/Header";
 import styles from "../../styles";
 
 export default function Dashboard() {
   return (
     <div style={styles.background}>
-      <p style={{ ...styles.text_dark, ...styles.text_M }}>
-        CITC EQUIPMENT
-        <br />
-        TRACKER
-      </p>
+      <Header label={"Dashboard"} />
+      <p style={{ ...styles.text_dark, ...styles.text_M }}>Dashboard Page</p>
     </div>
   );
 }