Feat: Add user login / logout

2024-11-19 00:03:05 +01:00 · 2024-11-19 00:03:05 +01:00 · ac3cf943f2
commit ac3cf943f2
parent 40c451b2c0
32 changed files with 7315 additions and 0 deletions
--- a/app/components/ui/navigation-bar.tsx
+++ b/app/components/ui/navigation-bar.tsx
@ -0,0 +1,65 @@
+'use client'
+
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { IconUserFilled } from "@tabler/icons-react"
+
+interface NavigationProps {
+  isLoggedIn: boolean,
+  username: string
+}
+
+export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
+    return (
+      <div className="flex flex-row p-4 gap-4 w-full fixed top-0 left-0 bg-slate-700 items-center justify-between">
+        <div className="flex flex-row gap-4 items-center">
+          <a href="/">Brawl Set</a>
+          <NavigationMenu>
+            <NavigationMenuList>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger>Cartes</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <NavigationMenuLink>Link</NavigationMenuLink>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger>Commandant·es</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <ul>
+                    <li>Commandant·es 1</li>
+                    <li>Commandant·es 2</li>
+                    <li>Commandant·es 3</li>
+                    <li>Commandant·es 4</li>
+                  </ul>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </NavigationMenu>
+        </div>
+        <div className="flex flex-row gap-4">
+          <Input placeholder="Rechercher des cartes" />
+          { !isLoggedIn && 
+            <>
+              <a href="/account/signin"><Button>Connexion</Button></a>
+              <Button disabled={true}>Inscription</Button>
+            </>
+          }
+          {
+            isLoggedIn &&
+            <a href="/account/profile" className="flex flex-row items-center gap-2">
+              <IconUserFilled color="gray" />
+              <span className="text-gray-400">{username}</span>
+            </a>
+          }
+        </div>
+      </div>
+    )
+  }