113 lines
3.9 KiB
TypeScript
113 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
export interface Track {
|
|
id: string
|
|
title: string
|
|
artistName: string
|
|
duration: number
|
|
plays?: number
|
|
position?: number
|
|
}
|
|
|
|
export interface TrackListProps {
|
|
tracks: Track[]
|
|
currentTrackId?: string
|
|
onTrackPlay?: (trackId: string) => void
|
|
showPosition?: boolean
|
|
showPlays?: boolean
|
|
}
|
|
|
|
export function TrackList({
|
|
tracks,
|
|
currentTrackId,
|
|
onTrackPlay,
|
|
showPosition = false,
|
|
showPlays = false
|
|
}: TrackListProps) {
|
|
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="space-y-1">
|
|
{tracks.map((track, index) => {
|
|
const isPlaying = track.id === currentTrackId
|
|
|
|
return (
|
|
<div
|
|
key={track.id}
|
|
className={`group flex items-center gap-4 px-4 py-3 rounded-lg transition cursor-pointer ${
|
|
isPlaying
|
|
? 'bg-purple-500/20'
|
|
: 'hover:bg-zinc-800'
|
|
}`}
|
|
onClick={() => onTrackPlay?.(track.id)}
|
|
>
|
|
{/* Position / Play Button */}
|
|
<div className="w-8 flex items-center justify-center">
|
|
{isPlaying ? (
|
|
<svg className="w-5 h-5 text-purple-400 animate-pulse" 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>
|
|
) : (
|
|
<>
|
|
<span className="text-zinc-400 group-hover:hidden">
|
|
{showPosition ? (track.position || index + 1) : ''}
|
|
</span>
|
|
<svg className="w-5 h-5 text-white hidden group-hover:block" 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>
|
|
|
|
{/* Track Info */}
|
|
<div className="flex-1 min-w-0">
|
|
<h4 className={`font-medium truncate ${
|
|
isPlaying ? 'text-purple-400' : 'text-white'
|
|
}`}>
|
|
{track.title}
|
|
</h4>
|
|
<p className="text-sm text-zinc-400 truncate">{track.artistName}</p>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="flex items-center gap-6 text-sm text-zinc-400">
|
|
{showPlays && track.plays !== undefined && (
|
|
<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(track.plays)}</span>
|
|
</div>
|
|
)}
|
|
<span className="tabular-nums">{formatDuration(track.duration)}</span>
|
|
</div>
|
|
|
|
{/* More Options */}
|
|
<button
|
|
className="p-2 text-zinc-400 hover:text-white opacity-0 group-hover:opacity-100 transition"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
// Handle more options
|
|
}}
|
|
>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|