104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { TableCell, TableRow } from '@/components/ui/table'
|
|
import type { Playlist } from '@/lib/api/services/playlists'
|
|
import { formatDuration } from '@/utils/format-duration'
|
|
import { Calendar, Clock, Edit, Music, Play, User } from 'lucide-react'
|
|
|
|
interface PlaylistRowProps {
|
|
playlist: Playlist
|
|
onEdit: (playlist: Playlist) => void
|
|
onSetCurrent: (playlist: Playlist) => void
|
|
}
|
|
|
|
export function PlaylistRow({ playlist, onEdit, onSetCurrent }: PlaylistRowProps) {
|
|
const formatDate = (dateString: string) => {
|
|
return new Date(dateString).toLocaleDateString()
|
|
}
|
|
|
|
return (
|
|
<TableRow className="hover:bg-muted/50">
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<Music className="h-4 w-4 text-muted-foreground flex-shrink-0" />
|
|
<div className="min-w-0">
|
|
<div className="font-medium truncate">{playlist.name}</div>
|
|
{playlist.description && (
|
|
<div className="text-sm text-muted-foreground truncate">
|
|
{playlist.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
{playlist.genre ? (
|
|
<Badge variant="secondary">{playlist.genre}</Badge>
|
|
) : (
|
|
<span className="text-muted-foreground">-</span>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
{playlist.user_name ? (
|
|
<div className="flex items-center gap-2">
|
|
<User className="h-4 w-4 text-muted-foreground" />
|
|
<span>{playlist.user_name}</span>
|
|
</div>
|
|
) : (
|
|
<span className="text-muted-foreground">System</span>
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<div className="flex items-center justify-center gap-1">
|
|
<Music className="h-3 w-3 text-muted-foreground" />
|
|
{playlist.sound_count}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<div className="flex items-center justify-center gap-1">
|
|
<Clock className="h-3 w-3 text-muted-foreground" />
|
|
{formatDuration(playlist.total_duration || 0)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<div className="flex items-center justify-center gap-1">
|
|
<Calendar className="h-3 w-3 text-muted-foreground" />
|
|
{formatDate(playlist.created_at)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<div className="flex items-center justify-center gap-1">
|
|
{playlist.is_current && <Badge variant="default">Current</Badge>}
|
|
{playlist.is_main && <Badge variant="outline">Main</Badge>}
|
|
{!playlist.is_current && !playlist.is_main && (
|
|
<span className="text-muted-foreground">-</span>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<div className="flex items-center justify-center gap-1">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => onEdit(playlist)}
|
|
className="h-8 w-8 p-0"
|
|
title={`Edit "${playlist.name}"`}
|
|
>
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
{!playlist.is_current && (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => onSetCurrent(playlist)}
|
|
className="h-8 w-8 p-0"
|
|
title={`Set "${playlist.name}" as current playlist`}
|
|
>
|
|
<Play className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
} |