From df754b09ea7c87711c4fc40891e27121487eb0be Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Tue, 14 Feb 2023 20:54:18 +0800
Subject: [PATCH] Added initial header

---
 src/App.tsx                        |  4 +++-
 src/components/Header/Header.tsx   | 15 +++++++++++++++
 src/routes/Dashboard/Dashboard.tsx |  2 +-
 src/styles.tsx                     | 28 ++++++++++++++++++++++++++++
 4 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Header/Header.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 8dbfd5a..f7e83e3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import Dashboard from "./routes/Dashboard/Dashboard";
+import Dashboard from "./Routes/Dashboard/Dashboard";
+import Header from "./Components/Header/Header";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 const router = createBrowserRouter([
@@ -11,6 +12,7 @@ const router = createBrowserRouter([
 export default function App() {
   return (
     <React.StrictMode>
+      <Header />
       <RouterProvider router={router} />
     </React.StrictMode>
   );
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000..0620608
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import AppLogo from "../Icons/AppLogo/AppLogo";
+import styles from "../../styles";
+
+export default function Header() {
+  return (
+    <div style={styles.header_container}>
+      <div style={styles.header_left}>
+        <AppLogo size={64} color="#6f9b78" />
+        <p style={styles.logo_title}>Ivy</p>
+      </div>
+      <div style={styles.header_right}></div>
+    </div>
+  );
+}
diff --git a/src/routes/Dashboard/Dashboard.tsx b/src/routes/Dashboard/Dashboard.tsx
index a949c17..143602f 100644
--- a/src/routes/Dashboard/Dashboard.tsx
+++ b/src/routes/Dashboard/Dashboard.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import AppLogo from "../../components/Icons/AppLogo/AppLogo";
+import AppLogo from "../../Components/Icons/AppLogo/AppLogo";
 import "../../index.css";
 import styles from "../../styles";
 
diff --git a/src/styles.tsx b/src/styles.tsx
index e61aefb..2869c9c 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -16,6 +16,34 @@ const styles: { [key: string]: React.CSSProperties } = {
     color: "white",
     fontWeight: "bold",
   },
+  logo_title: {
+    color: "#6c9575",
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  header_container: {
+    display: "flex",
+    flexDirection: "row",
+    position: "sticky",
+    backgroundColor: "#3d4848",
+    top: 0,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingRight: 32,
+    paddingLeft: 32,
+  },
+  header_left: {
+    display: "flex",
+    flexDirection: "row",
+    width: "50%",
+    justifyContent: "left",
+  },
+  header_right: {
+    display: "flex",
+    flexDirection: "row",
+    width: "50%",
+    justifyContent: "right",
+  },
 };
 
 export default styles;