From 03948ddae155066ca1c3745cf782110cede29cd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aron=20Sch=C3=BCler?= <aron.schueler@ambient.digital>
Date: Sun, 3 Mar 2024 21:12:14 +0100
Subject: [PATCH] feat: add placeholder for Goals page

---
 src/router.tsx       |  3 ++-
 src/views/Goals.tsx  |  9 +++++++++
 src/views/Layout.tsx | 14 +++++++++-----
 3 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 src/views/Goals.tsx

diff --git a/src/router.tsx b/src/router.tsx
index ad64b12..c96e78a 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -6,6 +6,7 @@ import {
   RedirectIfNotLoggedIn,
   RedirectIfSignedIn,
 } from "./utils/RedirectIfNotLoggedIn";
+import { Goals } from "./views/Goals";
 
 export const router = createBrowserRouter([
   {
@@ -30,7 +31,7 @@ export const router = createBrowserRouter([
       },
       {
         path: "goals",
-        Component: () => <h1>Goals</h1>,
+        Component: Goals,
       },
     ],
   },
diff --git a/src/views/Goals.tsx b/src/views/Goals.tsx
new file mode 100644
index 0000000..892a19d
--- /dev/null
+++ b/src/views/Goals.tsx
@@ -0,0 +1,9 @@
+export const Goals = () => (
+  <div className="flex flex-grow flex-col gap-8 bg-gray-200 py-8">
+    <div className="flex mx-6 flex-col items-center justify-center">
+      <div className="w-full p-4 bg-gray-100 rounded-md shadow-md flex flex-col gap-4">
+        <h2 className="text-2xl font-bold">Goals</h2>
+      </div>
+    </div>
+  </div>
+);
diff --git a/src/views/Layout.tsx b/src/views/Layout.tsx
index c62dbae..e0dfe4a 100644
--- a/src/views/Layout.tsx
+++ b/src/views/Layout.tsx
@@ -24,11 +24,15 @@ export const Layout = ({ children }: PropsWithChildren) => {
           </div>
           <UserMenu />
         </div>
-        <div className="flex gap-2 text-lg font-semibold [&>.active]:underline border-b-2 border-gray-200 ">
-          <NavLink to="/dashboard">Dashboard</NavLink>
-          <NavLink to="/goals">Goals</NavLink>
-        </div>
-        {isLoggedIn && <SessionPicker />}
+        {isLoggedIn && (
+          <>
+            <div className="flex gap-2 text-lg font-semibold [&>.active]:underline border-b-2 border-gray-200 ">
+              <NavLink to="/dashboard">Dashboard</NavLink>
+              <NavLink to="/goals">Goals</NavLink>
+            </div>
+            <SessionPicker />
+          </>
+        )}
       </header>
       {children}
       <footer className="flex flex-row items-center justify-center h-16 bg-sky-50 px-6 py-4 gap-2">