56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
export interface GenreHeaderProps {
|
|
name: string
|
|
description?: string
|
|
songCount?: number
|
|
coverGradient?: string
|
|
}
|
|
|
|
export function GenreHeader({
|
|
name,
|
|
description,
|
|
songCount,
|
|
coverGradient = 'from-purple-600 to-purple-900'
|
|
}: GenreHeaderProps) {
|
|
return (
|
|
<div className={`relative h-80 bg-gradient-to-b ${coverGradient} overflow-hidden`}>
|
|
{/* Background Pattern */}
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="absolute inset-0" style={{
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
|
backgroundSize: '60px 60px'
|
|
}} />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative h-full flex flex-col justify-end p-8">
|
|
<div className="max-w-4xl">
|
|
<p className="text-sm font-semibold text-white/80 uppercase tracking-wide mb-2">
|
|
Genre
|
|
</p>
|
|
|
|
<h1 className="text-7xl font-bold text-white mb-4">
|
|
{name}
|
|
</h1>
|
|
|
|
{description && (
|
|
<p className="text-lg text-white/90 mb-4 max-w-2xl line-clamp-2">
|
|
{description}
|
|
</p>
|
|
)}
|
|
|
|
{songCount !== undefined && (
|
|
<p className="text-sm text-white/70">
|
|
{songCount.toLocaleString()} {songCount === 1 ? 'song' : 'songs'}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Gradient Overlay */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-zinc-900 to-transparent" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|