65 lines
2.2 KiB
TypeScript
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>
|
|
)
|
|
}
|