75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
export interface LabelCardProps {
|
|
label: {
|
|
id: string
|
|
name: string
|
|
logoUrl?: string
|
|
description?: string
|
|
_count?: {
|
|
artists?: number
|
|
}
|
|
}
|
|
showArtistCount?: boolean
|
|
onClick?: (labelId: string) => void
|
|
}
|
|
|
|
export function LabelCard({
|
|
label,
|
|
showArtistCount = true,
|
|
onClick
|
|
}: LabelCardProps) {
|
|
const artistCount = label._count?.artists || 0
|
|
|
|
const handleClick = () => {
|
|
if (onClick) {
|
|
onClick(label.id)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="group bg-zinc-900 rounded-lg p-6 hover:bg-zinc-800 transition cursor-pointer text-center"
|
|
onClick={handleClick}
|
|
>
|
|
{/* Logo */}
|
|
<div className="relative w-32 h-32 mx-auto mb-4">
|
|
<div className="w-full h-full rounded-lg overflow-hidden bg-zinc-800">
|
|
{label.logoUrl ? (
|
|
<img
|
|
src={label.logoUrl}
|
|
alt={label.name}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<svg className="w-16 h-16 text-zinc-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 9a1 1 0 000 2h4a1 1 0 100-2H8z" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Label Info */}
|
|
<div>
|
|
<h3 className="font-semibold text-white truncate mb-1 group-hover:text-purple-400 transition">
|
|
{label.name}
|
|
</h3>
|
|
|
|
{showArtistCount && (
|
|
<p className="text-sm text-zinc-400">
|
|
{artistCount} {artistCount === 1 ? 'artist' : 'artists'}
|
|
</p>
|
|
)}
|
|
|
|
{label.description && (
|
|
<p className="text-xs text-zinc-500 mt-2 line-clamp-2">
|
|
{label.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|