92 lines
3.0 KiB
TypeScript
92 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
export interface LabelHeaderProps {
|
|
label: {
|
|
id: string
|
|
name: string
|
|
logoUrl?: string
|
|
description?: string
|
|
website?: string
|
|
}
|
|
isOwner?: boolean
|
|
onEdit?: () => void
|
|
}
|
|
|
|
export function LabelHeader({
|
|
label,
|
|
isOwner = false,
|
|
onEdit
|
|
}: LabelHeaderProps) {
|
|
return (
|
|
<div className="relative">
|
|
{/* Banner */}
|
|
<div className="h-64 bg-gradient-to-b from-purple-900/50 to-zinc-900 relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative -mt-32 px-8">
|
|
<div className="flex items-end gap-6 mb-6">
|
|
{/* Logo */}
|
|
<div className="relative flex-shrink-0">
|
|
<div className="w-48 h-48 rounded-lg overflow-hidden bg-zinc-800 border-4 border-zinc-900 shadow-2xl">
|
|
{label.logoUrl ? (
|
|
<img
|
|
src={label.logoUrl}
|
|
alt={label.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<svg className="w-24 h-24 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>
|
|
|
|
{/* Info */}
|
|
<div className="flex-1 pb-4">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<h1 className="text-5xl font-bold text-white">{label.name}</h1>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
{label.description && (
|
|
<p className="mt-4 text-zinc-400 max-w-2xl line-clamp-3">
|
|
{label.description}
|
|
</p>
|
|
)}
|
|
|
|
{/* Website Link */}
|
|
{label.website && (
|
|
<a
|
|
href={label.website}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-4 inline-flex items-center gap-2 text-purple-400 hover:text-purple-300 transition"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
|
</svg>
|
|
Visit Website
|
|
</a>
|
|
)}
|
|
|
|
{/* Edit Button */}
|
|
{isOwner && onEdit && (
|
|
<button
|
|
onClick={onEdit}
|
|
className="mt-6 px-8 py-3 bg-zinc-800 text-white hover:bg-zinc-700 border border-zinc-700 rounded-full font-semibold transition"
|
|
>
|
|
Edit Profile
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|