globuzma/brawlset
1
0
Fork 0
Code Issues Pull requests Projects 2 Releases Packages 1 Wiki Activity
brawlset/app/components/ui/navigation-bar.tsx
globuzma 64a4c5fb87 Feat: Add commander and Bset stats
2025-01-27 12:40:17 +01:00

399 lines
18 KiB
TypeScript
Raw Blame History

'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>
)
}
Reference in a new issue View git blame Copy permalink