399 lines
18 KiB
TypeScript
399 lines
18 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"
|
|
import { useEffect, useState } from 'react'
|
|
|
|
interface NavigationProps {
|
|
isLoggedIn: boolean,
|
|
username: string
|
|
}
|
|
|
|
|
|
interface bsetJsonObject {
|
|
name: string,
|
|
sanitized_name: string,
|
|
set_codes: string[],
|
|
icons: string[]
|
|
}
|
|
|
|
export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
|
|
const [bsetsList, setBsetsList] = useState<bsetJsonObject[]>([])
|
|
|
|
useEffect(() => {
|
|
fetch('http://localhost:8072/misc/bsets.json').then((res) => {
|
|
if(res.status == 200) {
|
|
res.json().then((data) => {
|
|
setBsetsList(data)
|
|
console.log(data)
|
|
})
|
|
}
|
|
})
|
|
}, [])
|
|
|
|
|
|
return (
|
|
<div className="flex z-50 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>Commandants</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<a href="/commander/top">Top commandants</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<span>Mono</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/white">
|
|
<White className="h-4 w-4"/>
|
|
<span>White</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/blue">
|
|
<Blue className="h-4 w-4"/>
|
|
<span>Bleu</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/black">
|
|
<Black className="h-4 w-4"/>
|
|
<span>Noir</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/red">
|
|
<Red className="h-4 w-4"/>
|
|
<span>Rouge</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/green">
|
|
<Green className="h-4 w-4"/>
|
|
<span>Vert</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/colorless">
|
|
<Colorless className="h-4 w-4"/>
|
|
<span>Incolor</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<span>2 couleurs</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/azorius">
|
|
<White className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<span>Azorius</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/dimir">
|
|
<Blue className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<span>Dimir</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/rakdos">
|
|
<Black className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<span>Rakdos</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/gruul">
|
|
<Red className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<span>Gruul</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/selesnya">
|
|
<Green className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<span>Selesnya</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/orzhov">
|
|
<White className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<span>Orzhov</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/izzet">
|
|
<Blue className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<span>Izzet</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/golgari">
|
|
<Black className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<span>Golgari</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/boros">
|
|
<Red className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<span>Boros</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/simic">
|
|
<Green className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<span>Simic</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<span>3 couleurs</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/esper">
|
|
<White className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<span>Esper</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/grixis">
|
|
<Blue className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<span>Grixis</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/jund">
|
|
<Black className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<span>Jund</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/naya">
|
|
<Red className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<span>Naya</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/bant">
|
|
<Green className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<span>Bant</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/abzan">
|
|
<White className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<span>Abzan</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/jeskai">
|
|
<Blue className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<span>Jeskai</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/sultai">
|
|
<Black className="h-4 w-4"/>
|
|
<Green className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<span>Sultai</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/mardu">
|
|
<Red className="h-4 w-4"/>
|
|
<White className="h-4 w-4"/>
|
|
<Black className="h-4 w-4"/>
|
|
<span>Mardu</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/temur">
|
|
<Green className="h-4 w-4"/>
|
|
<Blue className="h-4 w-4"/>
|
|
<Red className="h-4 w-4"/>
|
|
<span>Temur</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<span>4+ couleurs</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/yore-tiller">
|
|
<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>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/glint-eye">
|
|
<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>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/dune-brood">
|
|
<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>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/ink-treader">
|
|
<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>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/witch-maw">
|
|
<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>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a className="flex flex-row gap-2 items-center" href="/commander/five-color">
|
|
<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>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button>BSets</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56">
|
|
<DropdownMenuGroup>
|
|
{ bsetsList.length == 0 && (
|
|
<DropdownMenuItem>
|
|
<span>Loading</span>
|
|
</DropdownMenuItem>
|
|
)}
|
|
{ bsetsList.length != 0 && bsetsList.slice(0,7).map((bset) => (
|
|
<DropdownMenuItem>
|
|
<a href={"/bset/" + bset.sanitized_name} className="flex flex-row gap-2 items-center">
|
|
<div className="flex flex-row gap-1">
|
|
{ bset.icons.map((icon) => (
|
|
<img src={icon} className="w-4 h-4"/>
|
|
))}
|
|
</div>
|
|
<span>{bset.name}</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
))}
|
|
<DropdownMenuItem>
|
|
<a href="/bset/all">Plus de BSets...</a>
|
|
</DropdownMenuItem>
|
|
</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/decks" className="flex flex-row items-center gap-2"><span className="text-gray-400">Decks</span></a>
|
|
<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>
|
|
)
|
|
}
|