43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { Badge as BadgeIcon } from "lucide-react"
|
|
import { Card } from "@/components/ui/card"
|
|
|
|
interface Badge {
|
|
id: number
|
|
name: string
|
|
description: string
|
|
icon: string
|
|
slug: string
|
|
}
|
|
|
|
interface BadgeListProps {
|
|
badges: Badge[]
|
|
}
|
|
|
|
export function BadgeList({ badges }: BadgeListProps) {
|
|
if (!badges || badges.length === 0) {
|
|
return (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
<p>No badges earned yet. Go attend some shows!</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{badges.map((badge) => (
|
|
<Card key={badge.id} className="flex flex-col items-center p-4 bg-muted/20 text-center gap-2 transition-all hover:bg-muted/40">
|
|
<div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
|
|
{/* We could dynamically map icons here based on badge.icon string */}
|
|
<BadgeIcon className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-sm">{badge.name}</p>
|
|
<p className="text-xs text-muted-foreground line-clamp-2" title={badge.description}>
|
|
{badge.description}
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|