brawlset/app/components/ui/navigation-bar.tsx
2024-11-19 17:47:38 +01:00

300 lines
12 KiB
TypeScript

'use client'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-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>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>Cartes</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuGroup>
<DropdownMenuItem>
<span>Top cartes</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Terrains</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Cartes salées</span>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<span>Par couleurs</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<span>Blanc</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Bleu</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Noir</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Rouge</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Vert</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Incolor</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Multicolor</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<span>Par type</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<span>Créatures</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Éphémères</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Rituels</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Artefacts</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Équipements</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Artefacts de mana</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Artefacts utilitaires</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Enchantements</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Aura</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Planeswalker</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Terrains</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Terrains utilitaires</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Terrains ajusteurs</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuItem>
<span>Combos</span>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>Commandant·es</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuGroup>
<DropdownMenuItem>
<span>Top commandant·es</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Second plan</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Partenaires</span>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<span>Mono</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<span>Blanc</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Bleu</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Noir</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Rouge</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Vert</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Incolor</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<span>2 couleurs</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<span>WU Azorius</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>UB Dimir</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>BR Rakdos</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>RG Gruul</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>GW Selesnya</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>WB Orzhov</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>UR Izzet</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>BG Golgari</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>RW Boros</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>GU Simic</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<span>3 couleurs</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<span>WUB Esper</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>UBR Grixis</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>BRG Jund</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>RGW Naya</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>GWU Bant</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>WBG Abzan</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>URW Jeskai</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>BGU Sultai</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>RWB Mardu</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>GUR Temur</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<span>4+ couleurs</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<span>WUBR Yore-Tiller</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>UBRG Glint-Eye</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>BRGW Dune-Brood</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>RGWU Ink-Treader</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>GWUB Witch-Maw</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>WBBRG 5 couleurs</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
<a href="/rules"><Button>Règles</Button></a>
</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>
)
}