82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
export interface LabelStatsProps {
|
|
stats: {
|
|
artistCount: number
|
|
songCount: number
|
|
albumCount: number
|
|
totalPlays: number
|
|
}
|
|
}
|
|
|
|
export function LabelStats({ stats }: LabelStatsProps) {
|
|
const formatNumber = (num: number) => {
|
|
if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`
|
|
if (num >= 1000) return `${(num / 1000).toFixed(1)}K`
|
|
return num.toString()
|
|
}
|
|
|
|
const statItems = [
|
|
{
|
|
label: 'Artists',
|
|
value: stats.artistCount,
|
|
icon: (
|
|
<svg className="w-6 h-6" 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>
|
|
)
|
|
},
|
|
{
|
|
label: 'Songs',
|
|
value: stats.songCount,
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
|
|
</svg>
|
|
)
|
|
},
|
|
{
|
|
label: 'Albums',
|
|
value: stats.albumCount,
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z" />
|
|
<path fillRule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clipRule="evenodd" />
|
|
</svg>
|
|
)
|
|
},
|
|
{
|
|
label: 'Total Plays',
|
|
value: stats.totalPlays,
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
|
|
</svg>
|
|
)
|
|
}
|
|
]
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{statItems.map((item) => (
|
|
<div
|
|
key={item.label}
|
|
className="bg-zinc-900 rounded-lg p-6 hover:bg-zinc-800 transition"
|
|
>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="text-purple-400">
|
|
{item.icon}
|
|
</div>
|
|
<p className="text-sm text-zinc-400 font-medium">
|
|
{item.label}
|
|
</p>
|
|
</div>
|
|
<p className="text-3xl font-bold text-white">
|
|
{formatNumber(item.value)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|