Account tabs

cqb13 · Sep 13, 2023 · b610e78 · b610e78
1 parent f1ce6bd
commit b610e78
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/app/account/page.tsx b/app/account/page.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { useState, useEffect } from 'react';
+import { useAuthContext } from "@context/authContext";
+import Button from '@/components/general/button';
+import { db, auth } from '@lib/firebase';
+
+export default function History() {
+    const [signedIn, setSignedIn] = useState(false);
+
+    useEffect(() => {
+        auth.onAuthStateChanged((user) => {
+            if (user) {
+                setSignedIn(true);
+            } else {
+                setSignedIn(false);
+            }
+        });
+    }, []);
+
+    const [currentWindow, setCurrentWindow] = useState('stats');
+
+    const updateCurrentWindow = (window: string) => {
+        setCurrentWindow(window);
+    }
+
+    return (
+      <main className="flex items-center justify-center pt-4 text-black p-24">
+        <div className='flex gap-2 w-full'>
+            <Button title='Stats' onClick={() => updateCurrentWindow("stats")} selected={currentWindow == "stats" ? true : false}/>
+            <Button title='Social' onClick={() => updateCurrentWindow("social")} selected={currentWindow == "social" ? true : false}/>
+            <Button title='Account' onClick={() => updateCurrentWindow("account")} selected={currentWindow == "account" ? true : false}/>
+        </div>
+
+      </main>
+    )
+  }
+
diff --git a/components/general/button.tsx b/components/general/button.tsx
@@ -3,13 +3,14 @@
 type Props = {
   title: string;
   onClick: (event: any) => void;
+  selected?: boolean;
 };
 
-export default function Button({ title, onClick }: Props) {
+export default function Button({ title, onClick, selected }: Props) {
   return (
     <button
       type="button"
-      className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-lightest text-sm font-medium text-gray-700 hover:shadow-card active:shadow-bar"
+      className={`inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-lightest text-sm font-medium text-gray-700 hover:shadow-card active:shadow-bar ${selected ? "border-highlight" : ""}`}
       onClick={onClick}
     >
       {title}

diff --git a/components/layout/nav.tsx b/components/layout/nav.tsx
@@ -11,7 +11,7 @@ export default function NavBar() {
   return (
     <nav
       className={`${useScroll(10)
-        ? "shadow-bar backdrop-blur-md bg-opacity-50"
+        ? "shadow-bar backdrop-blur-md"
         : ""}
         : ""} flex flex-row items-center justify-between p-4 sticky top-0 z-50 bg-darkest text-lightest transition-all`}
     >