83f400acbb
- Added AvailableSound component for displaying and adding sounds to playlists. - Introduced DragOverlayComponents for drag-and-drop functionality with inline previews and drop areas. - Created PlaylistDetailsCard for editing playlist details with save and cancel options. - Implemented PlaylistEditHeader for displaying playlist title and current status. - Added PlaylistStatsCard to show statistics about the playlist. - Refactored PlaylistEditPage to utilize new components, enhancing readability and maintainability. - Introduced loading and error states with PlaylistEditLoading and PlaylistEditError components. - Updated SortableTableRow and SimpleSortableRow for better drag-and-drop handling.
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import { Badge } from '@/components/ui/badge'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import type { Playlist, PlaylistSound } from '@/lib/api/services/playlists'
|
|
import { formatDuration } from '@/utils/format-duration'
|
|
import { Clock } from 'lucide-react'
|
|
|
|
interface PlaylistStatsCardProps {
|
|
playlist: Playlist
|
|
sounds: PlaylistSound[]
|
|
}
|
|
|
|
export function PlaylistStatsCard({ playlist, sounds }: PlaylistStatsCardProps) {
|
|
const totalDuration = sounds.reduce(
|
|
(total, sound) => total + (sound.duration || 0),
|
|
0
|
|
)
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Clock className="h-5 w-5" />
|
|
Playlist Statistics
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="text-center p-3 bg-muted rounded-lg">
|
|
<div className="text-2xl font-bold">{sounds.length}</div>
|
|
<div className="text-sm text-muted-foreground">Tracks</div>
|
|
</div>
|
|
<div className="text-center p-3 bg-muted rounded-lg">
|
|
<div className="text-2xl font-bold">
|
|
{formatDuration(totalDuration)}
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">Duration</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span>Created:</span>
|
|
<span>
|
|
{new Date(playlist.created_at).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
{playlist.updated_at && (
|
|
<div className="flex justify-between text-sm">
|
|
<span>Updated:</span>
|
|
<span>
|
|
{new Date(playlist.updated_at).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between text-sm">
|
|
<span>Status:</span>
|
|
<div className="flex gap-1">
|
|
{playlist.is_main && (
|
|
<Badge variant="outline" className="text-xs">
|
|
Main
|
|
</Badge>
|
|
)}
|
|
{playlist.is_current && (
|
|
<Badge variant="default" className="text-xs">
|
|
Current
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
} |