124 lines
5 KiB
TypeScript
124 lines
5 KiB
TypeScript
"use client"
|
|
|
|
import { useRouter } from "next/navigation"
|
|
import { ChevronDown, Music } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@/components/ui/sheet"
|
|
import { useVertical } from "@/contexts/vertical-context"
|
|
import { VERTICALS, VerticalSlug } from "@/config/verticals"
|
|
import { useState } from "react"
|
|
|
|
export function BandSelector() {
|
|
const { current, setCurrent } = useVertical()
|
|
const router = useRouter()
|
|
const [sheetOpen, setSheetOpen] = useState(false)
|
|
|
|
const handleSelect = (slug: VerticalSlug) => {
|
|
setCurrent(slug)
|
|
router.push(`/${slug}`)
|
|
setSheetOpen(false)
|
|
}
|
|
|
|
// Desktop: Dropdown menu
|
|
// Mobile: Sheet drawer
|
|
return (
|
|
<>
|
|
{/* Desktop Dropdown (hidden on mobile) */}
|
|
<div className="hidden md:block">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="flex items-center gap-2 font-bold text-lg"
|
|
>
|
|
<span>{current ? current.name : "All Bands"}</span>
|
|
<ChevronDown className="h-4 w-4 opacity-50" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="w-56">
|
|
<DropdownMenuItem
|
|
onClick={() => {
|
|
setCurrent(null)
|
|
router.push("/")
|
|
setSheetOpen(false)
|
|
}}
|
|
className={`cursor-pointer ${current === null ? "font-bold" : ""}`}
|
|
>
|
|
All Bands
|
|
</DropdownMenuItem>
|
|
{VERTICALS.map((vertical) => (
|
|
<DropdownMenuItem
|
|
key={vertical.slug}
|
|
onClick={() => handleSelect(vertical.slug)}
|
|
className={`cursor-pointer ${current?.slug === vertical.slug ? "font-bold" : ""}`}
|
|
>
|
|
{vertical.name}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
{/* Mobile Sheet (hidden on desktop) */}
|
|
<div className="md:hidden">
|
|
<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
|
|
<SheetTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="lg"
|
|
className="flex items-center gap-2 font-bold text-lg px-3"
|
|
>
|
|
<span>{current ? current.name : "All Bands"}</span>
|
|
<ChevronDown className="h-4 w-4 opacity-50" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="bottom" className="h-[60vh]">
|
|
<SheetHeader>
|
|
<SheetTitle className="flex items-center gap-2">
|
|
<Music className="h-5 w-5" />
|
|
Switch Band
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
<div className="grid gap-2 py-4">
|
|
<Button
|
|
variant={current === null ? "default" : "outline"}
|
|
size="lg"
|
|
className="w-full justify-start text-lg h-14"
|
|
onClick={() => {
|
|
setCurrent(null)
|
|
router.push("/")
|
|
setSheetOpen(false)
|
|
}}
|
|
>
|
|
All Bands
|
|
</Button>
|
|
{VERTICALS.map((vertical) => (
|
|
<Button
|
|
key={vertical.slug}
|
|
variant={current?.slug === vertical.slug ? "default" : "outline"}
|
|
size="lg"
|
|
className="w-full justify-start text-lg h-14"
|
|
onClick={() => handleSelect(vertical.slug)}
|
|
>
|
|
{vertical.name}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|