108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
|
|
export interface SongCardProps {
|
|
id: string
|
|
title: string
|
|
artistName: string
|
|
coverUrl?: string
|
|
duration: number
|
|
plays?: number
|
|
onPlay?: () => void
|
|
onClick?: () => void
|
|
}
|
|
|
|
export function SongCard({
|
|
id,
|
|
title,
|
|
artistName,
|
|
coverUrl,
|
|
duration,
|
|
plays = 0,
|
|
onPlay,
|
|
onClick
|
|
}: SongCardProps) {
|
|
const [isHovered, setIsHovered] = useState(false)
|
|
|
|
const formatDuration = (seconds: number) => {
|
|
const mins = Math.floor(seconds / 60)
|
|
const secs = seconds % 60
|
|
return `${mins}:${secs.toString().padStart(2, '0')}`
|
|
}
|
|
|
|
const formatPlays = (count: number) => {
|
|
if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`
|
|
if (count >= 1000) return `${(count / 1000).toFixed(1)}K`
|
|
return count.toString()
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="group bg-zinc-900 rounded-lg p-4 hover:bg-zinc-800 transition cursor-pointer"
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
onClick={onClick}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
{/* Cover Image */}
|
|
<div className="relative flex-shrink-0">
|
|
<div className="w-16 h-16 rounded bg-zinc-800 overflow-hidden">
|
|
{coverUrl ? (
|
|
<img
|
|
src={coverUrl}
|
|
alt={title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<svg className="w-8 h-8 text-zinc-600" 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>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Play Button Overlay */}
|
|
{isHovered && onPlay && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onPlay()
|
|
}}
|
|
className="absolute inset-0 flex items-center justify-center bg-black/60 rounded"
|
|
>
|
|
<div className="w-10 h-10 rounded-full bg-purple-500 hover:bg-purple-600 flex items-center justify-center">
|
|
<svg className="w-5 h-5 text-white ml-0.5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M6.3 4.1c-.4-.2-.8 0-.8.4v11c0 .4.4.6.8.4l9-5.5c.3-.2.3-.6 0-.8l-9-5.5z" />
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Song Info */}
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-medium text-white truncate group-hover:text-purple-400 transition">
|
|
{title}
|
|
</h3>
|
|
<p className="text-sm text-zinc-400 truncate">{artistName}</p>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="flex items-center gap-4 text-sm text-zinc-400">
|
|
{plays > 0 && (
|
|
<div className="flex items-center gap-1">
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path 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" />
|
|
</svg>
|
|
<span>{formatPlays(plays)}</span>
|
|
</div>
|
|
)}
|
|
<span>{formatDuration(duration)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|