59 lines
2.7 KiB
TypeScript
59 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Music2, Check } from "lucide-react"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Vertical } from "@/types/models"
|
|
|
|
interface BandGridProps {
|
|
verticals: Vertical[]
|
|
selectedBands: string[]
|
|
onToggle: (slug: string) => void
|
|
}
|
|
|
|
export function BandGrid({ verticals, selectedBands, onToggle }: BandGridProps) {
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
{verticals.map((v) => {
|
|
const isSelected = selectedBands.includes(v.slug)
|
|
return (
|
|
<Card
|
|
key={v.id}
|
|
className={`cursor-pointer transition-all hover:shadow-md ${isSelected ? "border-primary bg-primary/5 ring-1 ring-primary" : "hover:border-primary/50"
|
|
}`}
|
|
onClick={() => onToggle(v.slug)}
|
|
>
|
|
<CardContent className="flex flex-col items-center justify-center p-6 text-center gap-3 relative">
|
|
{isSelected && (
|
|
<div className="absolute top-2 right-2">
|
|
<Badge variant="default" className="h-5 w-5 p-0 flex items-center justify-center rounded-full">
|
|
<Check className="h-3 w-3" />
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
|
|
<div className="h-16 w-16 rounded-full bg-muted flex items-center justify-center overflow-hidden shadow-sm border border-border">
|
|
{v.logo_url ? (
|
|
<img
|
|
src={v.logo_url}
|
|
alt={v.name}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
) : (
|
|
<Music2 className="h-8 w-8 text-muted-foreground/50" />
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h3 className="font-semibold leading-tight">{v.name}</h3>
|
|
<p className="text-xs text-muted-foreground font-medium">
|
|
{(v.show_count || 0).toLocaleString()} shows
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|