brawlset/app/components/ui/navigation-bar.tsx

'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 { IconChevronDown } 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('/api/json/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 bg-white fixed top-0 left-0 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 bg-gradient-to-r from-black to-orange-500 bg-clip-text text-transparent">BrawlSet</span>
          </a>
        </div>
        <div className="flex flex-row gap-4 items-center">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <span className="text-stone-500 cursor-pointer flex flex-row gap-1 items-center">Commandants <IconChevronDown className="h-4"/></span>
            </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">
                          <div className="flex flex-row">
                            <White className="h-4 w-4"/>
                            <Blue className="h-4 w-4"/>
                          </div>
                          <span>Azorius</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/dimir">
                          <div className="flex flex-row">
                            <Blue className="h-4 w-4"/>
                            <Black className="h-4 w-4"/>
                          </div>
                          <span>Dimir</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/rakdos">
                          <div className="flex flex-row">
                            <Black className="h-4 w-4"/>
                            <Red className="h-4 w-4"/>
                          </div>
                          <span>Rakdos</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/gruul">
                          <div className="flex flex-row">
                            <Red className="h-4 w-4"/>
                            <Green className="h-4 w-4"/>
                          </div>
                          <span>Gruul</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/selesnya">
                          <div className="flex flex-row">
                            <Green className="h-4 w-4"/>
                            <White className="h-4 w-4"/>
                          </div>
                          <span>Selesnya</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/orzhov">
                          <div className="flex flex-row">
                            <White className="h-4 w-4"/>
                            <Black className="h-4 w-4"/>
                          </div>
                          <span>Orzhov</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/izzet">
                          <div className="flex flex-row">
                            <Blue className="h-4 w-4"/>
                            <Red className="h-4 w-4"/>
                          </div>
                          <span>Izzet</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/golgari">
                          <div className="flex flex-row">
                            <Black className="h-4 w-4"/>
                            <Green className="h-4 w-4"/>
                          </div>
                          <span>Golgari</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/boros">
                          <div className="flex flex-row">
                            <Red className="h-4 w-4"/>
                            <White className="h-4 w-4"/>
                          </div>
                          <span>Boros</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/simic">
                          <div className="flex flex-row">
                            <Green className="h-4 w-4"/>
                            <Blue className="h-4 w-4"/>
                          </div>
                          <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">
                          <div className="flex flex-row">
                            <White className="h-4 w-4"/>
                            <Blue className="h-4 w-4"/>
                            <Black className="h-4 w-4"/>
                          </div>
                          <span>Esper</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/grixis">
                          <div className="flex flex-row">
                            <Blue className="h-4 w-4"/>
                            <Black className="h-4 w-4"/>
                            <Red className="h-4 w-4"/>
                          </div>
                          <span>Grixis</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/jund">
                          <div className="flex flex-row">
                            <Black className="h-4 w-4"/>
                            <Red className="h-4 w-4"/>
                            <Green className="h-4 w-4"/>
                          </div>
                          <span>Jund</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/naya">
                          <div className="flex flex-row">
                            <Red className="h-4 w-4"/>
                            <Green className="h-4 w-4"/>
                            <White className="h-4 w-4"/>
                          </div>
                          <span>Naya</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/bant">
                          <div className="flex flex-row">
                            <Green className="h-4 w-4"/>
                            <White className="h-4 w-4"/>
                            <Blue className="h-4 w-4"/>
                          </div>
                          <span>Bant</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/abzan">
                          <div className="flex flex-row">
                            <White className="h-4 w-4"/>
                            <Black className="h-4 w-4"/>
                            <Green className="h-4 w-4"/>
                          </div>
                          <span>Abzan</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/jeskai">
                          <div className="flex flex-row">
                            <Blue className="h-4 w-4"/>
                            <Red className="h-4 w-4"/>
                            <White className="h-4 w-4"/>
                          </div>
                          <span>Jeskai</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/sultai">
                          <div className="flex flex-row">
                            <Black className="h-4 w-4"/>
                            <Green className="h-4 w-4"/>
                            <Blue className="h-4 w-4"/>
                          </div>
                          <span>Sultai</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/mardu">
                          <div className="flex flex-row">
                            <Red className="h-4 w-4"/>
                            <White className="h-4 w-4"/>
                            <Black className="h-4 w-4"/>
                          </div>
                          <span>Mardu</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/temur">
                          <div className="flex flex-row">
                            <Green className="h-4 w-4"/>
                            <Blue className="h-4 w-4"/>
                            <Red className="h-4 w-4"/>
                          </div>
                          <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">
                          <div className="flex flex-row">
                            <White className="h-4 w-4"/>
                            <Blue className="h-4 w-4"/>
                            <Black className="h-4 w-4"/>
                            <Red className="h-4 w-4"/>
                          </div>
                          <span>Yore-Tiller</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/glint-eye">
                          <div className="flex flex-row">
                            <Blue className="h-4 w-4"/>
                            <Black className="h-4 w-4"/>
                            <Red className="h-4 w-4"/>
                            <Green className="h-4 w-4"/>
                          </div>
                          <span>Glint-Eye</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/dune-brood">
                          <div className="flex flex-row">
                            <Black className="h-4 w-4"/>
                            <Red className="h-4 w-4"/>
                            <Green className="h-4 w-4"/>
                            <White className="h-4 w-4"/>
                          </div>
                          <span>Dune-Brood</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/ink-treader">
                          <div className="flex flex-row">
                            <Red className="h-4 w-4"/>
                            <Green className="h-4 w-4"/>
                            <White className="h-4 w-4"/>
                            <Blue className="h-4 w-4"/>
                          </div>
                          <span>Ink-Treader</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/witch-maw">
                          <div className="flex flex-row">
                            <Green className="h-4 w-4"/>
                            <White className="h-4 w-4"/>
                            <Blue className="h-4 w-4"/>
                            <Black className="h-4 w-4"/>
                          </div>
                          <span>Witch-Maw</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2 items-center" href="/commander/five-color">
                          <div className="flex flex-row">
                            <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"/>
                          </div>
                          <span>5 couleurs</span>
                        </a>
                      </DropdownMenuItem>
                    </DropdownMenuSubContent>
                  </DropdownMenuPortal>
                </DropdownMenuSub>
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <span className="text-stone-500 cursor-pointer flex flex-row gap-1 items-center">BSets <IconChevronDown className="h-4"/></span>
            </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" className="text-stone-500">Règles</a>
          <a href="/faq" className="text-stone-500">FAQ</a>
        </div>
        <div className="flex flex-row gap-4">
          { !isLoggedIn && 
            <>
              <a href="/account/signin" className="text-stone-500">Connexion</a>
              <a href="#" className="text-stone-500 cursor-not-allowed">Inscription</a>
            </>
          }
          {
            isLoggedIn &&
            <>
              <a href="/account/profile/decks" className="flex flex-row items-center gap-2 text-stone-500">Decks</a>
              <a href="/account/profile" className="flex flex-row items-center gap-2">
                <span className="text-stone-500">{username}</span>
              </a>
            </>
          }
        </div>
      </div>
    )
  }