29c5d30ebb
Phase 3 - Frontend Multi-Vertical Support: - Add VerticalContext for band state management - Add BandSelector dropdown component - Create dynamic [vertical] routes for shows, songs, venues - Update navbar to use band selector and vertical-aware links - Update api-config.ts for Fediversion domain - Rebrand from Elmeg to Fediversion
55 lines
2 KiB
TypeScript
55 lines
2 KiB
TypeScript
"use client"
|
|
|
|
import { useRouter } from "next/navigation"
|
|
import { ChevronDown } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { useVertical, VERTICALS, VerticalSlug } from "@/contexts/vertical-context"
|
|
|
|
export function BandSelector() {
|
|
const { current, setCurrent } = useVertical()
|
|
const router = useRouter()
|
|
|
|
const handleSelect = (slug: VerticalSlug) => {
|
|
setCurrent(slug)
|
|
router.push(`/${slug}`)
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="flex items-center gap-2 font-bold text-lg"
|
|
style={{ color: current.color }}
|
|
>
|
|
<span>{current.emoji}</span>
|
|
<span>{current.name}</span>
|
|
<ChevronDown className="h-4 w-4 opacity-50" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="w-56">
|
|
{VERTICALS.map((vertical) => (
|
|
<DropdownMenuItem
|
|
key={vertical.slug}
|
|
onClick={() => handleSelect(vertical.slug)}
|
|
className="flex items-center gap-3 cursor-pointer"
|
|
>
|
|
<span className="text-lg">{vertical.emoji}</span>
|
|
<span
|
|
className={vertical.slug === current.slug ? "font-bold" : ""}
|
|
style={{ color: vertical.slug === current.slug ? vertical.color : undefined }}
|
|
>
|
|
{vertical.name}
|
|
</span>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|