brawlset/app/components/ui/navigation-bar.tsx
2024-11-19 00:03:05 +01:00

65 lines
2.2 KiB
TypeScript

'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>
)
}