122 lines
3 KiB
TypeScript
122 lines
3 KiB
TypeScript
/**
|
|
* Composant TrackInfo
|
|
* Affiche les informations de la piste : titre, artiste, cover, métadonnées
|
|
*/
|
|
|
|
import { Music } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import type { Track } from '../types';
|
|
|
|
export interface TrackInfoProps {
|
|
track: Track | null;
|
|
className?: string;
|
|
showCover?: boolean;
|
|
showMetadata?: boolean;
|
|
coverSize?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
export function TrackInfo({
|
|
track,
|
|
className,
|
|
showCover = true,
|
|
showMetadata = true,
|
|
coverSize = 'md',
|
|
}: TrackInfoProps) {
|
|
if (!track) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center gap-4 text-muted-foreground',
|
|
className,
|
|
)}
|
|
>
|
|
<Music className="h-5 w-5" aria-hidden="true" />
|
|
<span>Aucune piste sélectionnée</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const coverSizes = {
|
|
sm: 'h-12 w-12',
|
|
md: 'h-16 w-16',
|
|
lg: 'h-24 w-24',
|
|
};
|
|
|
|
return (
|
|
<div className={cn('flex items-center gap-4', className)}>
|
|
{/* Cover */}
|
|
{showCover && (
|
|
<div className="flex-shrink-0">
|
|
{track.cover ? (
|
|
<img
|
|
src={track.cover}
|
|
alt={`Cover de ${track.title}`}
|
|
className={cn(
|
|
coverSizes[coverSize],
|
|
'rounded-lg object-cover bg-muted',
|
|
)}
|
|
/>
|
|
) : (
|
|
<div
|
|
className={cn(
|
|
coverSizes[coverSize],
|
|
'rounded-lg bg-muted flex items-center justify-center',
|
|
)}
|
|
>
|
|
<Music
|
|
className={cn(
|
|
coverSize === 'sm'
|
|
? 'h-6 w-6'
|
|
: coverSize === 'lg'
|
|
? 'h-12 w-12'
|
|
: 'h-8 w-8',
|
|
'text-muted-foreground',
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Track Info */}
|
|
<div className="flex-1 min-w-0">
|
|
<h3
|
|
className="text-sm font-semibold text-foreground truncate"
|
|
title={track.title}
|
|
>
|
|
{track.title}
|
|
</h3>
|
|
{track.artist && (
|
|
<p
|
|
className="text-xs text-muted-foreground truncate"
|
|
title={track.artist}
|
|
>
|
|
{track.artist}
|
|
</p>
|
|
)}
|
|
|
|
{/* Metadata */}
|
|
{showMetadata && (
|
|
<div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
|
|
{track.album && (
|
|
<span className="truncate" title={track.album}>
|
|
{track.album}
|
|
</span>
|
|
)}
|
|
{track.album && track.genre && (
|
|
<span className="text-muted-foreground">•</span>
|
|
)}
|
|
{track.genre && (
|
|
<span className="truncate" title={track.genre}>
|
|
{track.genre}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TrackInfo;
|