391 lines
16 KiB
TypeScript
391 lines
16 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"
|
|
import { Black, Blue, Green, White, Red, Colorless } from "@/components/ui/mana-icons"
|
|
|
|
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 className="flex flex-row gap-2 items-center" href="/">
|
|
<img src="/assets/logo.png" className="h-8" />
|
|
<span className="font-beleren text-3xl mt-2">BRAWL SET</span>
|
|
</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>
|
|
<White className="h-4 w-4"/>
|
|
<span>Blanc</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Blue className="h-4 w-4"/>
|
|
<span>Bleu</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Black className="h-4 w-4"/>
|
|
<span>Noir</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Red className="h-4 w-4"/>
|
|
<span>Rouge</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Green className="h-4 w-4"/>
|
|
<span>Vert</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Colorless className="h-4 w-4"/>
|
|
<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>
|
|
<White className="h-4 w-4"/>
|
|
<span>Blanc</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Blue className="h-4 w-4"/>
|
|
<span>Bleu</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Black className="h-4 w-4"/>
|
|
<span>Noir</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Red className="h-4 w-4"/>
|
|
<span>Rouge</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Green className="h-4 w-4"/>
|
|
<span>Vert</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Colorless className="h-4 w-4"/>
|
|
<span>Incolor</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<span>2 couleurs</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>
|
|
<White className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<span>Azorius</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Blue className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<span>Dimir</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Black className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<span>Rakdos</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Red className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<span>Gruul</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Green className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<span>Selesnya</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<White className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<span>Orzhov</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Blue className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<span>Izzet</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Black className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<span>Golgari</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Red className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<span>Boros</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Green className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<span>Simic</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<span>3 couleurs</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>
|
|
<White className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<span>Esper</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Blue className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<span>Grixis</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Black className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<span>Jund</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Red className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<span>Naya</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Green className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<span>Bant</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<White className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<span>Abzan</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Blue className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<span>Jeskai</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Black className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<span>Sultai</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Red className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<span>Mardu</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Green className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<span>Temur</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<span>4+ couleurs</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>
|
|
<White className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<span>Yore-Tiller</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Blue className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<span>Glint-Eye</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Black className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<span>Dune-Brood</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Red className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<span>Ink-Treader</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Green className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<span>Witch-Maw</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<White className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<span>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>
|
|
)
|
|
}
|