74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { ArtistCard } from './ArtistCard'
|
|
|
|
export interface ArtistRosterProps {
|
|
artists: Array<{
|
|
id: string
|
|
name: string
|
|
user?: {
|
|
avatarUrl?: string
|
|
}
|
|
_count?: {
|
|
followers?: number
|
|
}
|
|
verified?: boolean
|
|
}>
|
|
isOwner?: boolean
|
|
emptyMessage?: string
|
|
onRemoveArtist?: (artistId: string) => void
|
|
onArtistClick?: (artistId: string) => void
|
|
}
|
|
|
|
export function ArtistRoster({
|
|
artists,
|
|
isOwner = false,
|
|
emptyMessage = 'No artists signed yet',
|
|
onRemoveArtist,
|
|
onArtistClick
|
|
}: ArtistRosterProps) {
|
|
if (artists.length === 0) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<svg className="w-16 h-16 text-zinc-600 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
|
|
</svg>
|
|
<p className="text-zinc-400 text-lg">{emptyMessage}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{artists.map((artist) => (
|
|
<div key={artist.id} className="relative group">
|
|
<ArtistCard
|
|
id={artist.id}
|
|
name={artist.name}
|
|
avatarUrl={artist.user?.avatarUrl}
|
|
followers={artist._count?.followers}
|
|
verified={artist.verified}
|
|
onClick={() => onArtistClick?.(artist.id)}
|
|
/>
|
|
|
|
{/* Remove Button (only visible for owners) */}
|
|
{isOwner && onRemoveArtist && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onRemoveArtist(artist.id)
|
|
}}
|
|
className="absolute top-2 right-2 p-2 bg-red-600 hover:bg-red-700 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
|
|
title="Remove artist"
|
|
>
|
|
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|