quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance PlaylistStatsCard with NumberFlow for dynamic track count and duration display
Some checks failed
Frontend CI / lint (push) Failing after 19s
Details
Frontend CI / build (push) Has been skipped
Details

Browse Source
This commit is contained in:
JSC
2025-08-15 13:17:16 +02:00
parent 83f400acbb
commit 32140d7b5a
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/playlists/playlist-edit/PlaylistStatsCard.tsx
View File

@@ -1,7 +1,8 @@
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { NumberFlowDuration } from '@/components/ui/number-flow-duration'
import type { Playlist, PlaylistSound } from '@/lib/api/services/playlists' import type { Playlist, PlaylistSound } from '@/lib/api/services/playlists'
import { formatDuration } from '@/utils/format-duration' import NumberFlow from '@number-flow/react'
import { Clock } from 'lucide-react' import { Clock } from 'lucide-react'
interface PlaylistStatsCardProps { interface PlaylistStatsCardProps {
@@ -26,12 +27,12 @@ export function PlaylistStatsCard({ playlist, sounds }: PlaylistStatsCardProps)
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="text-center p-3 bg-muted rounded-lg"> <div className="text-center p-3 bg-muted rounded-lg">
<div className="text-2xl font-bold">{sounds.length}</div> <div className="text-2xl font-bold"><NumberFlow value={sounds.length} /></div>
<div className="text-sm text-muted-foreground">Tracks</div> <div className="text-sm text-muted-foreground">Tracks</div>
</div> </div>
<div className="text-center p-3 bg-muted rounded-lg"> <div className="text-center p-3 bg-muted rounded-lg">
<div className="text-2xl font-bold"> <div className="text-2xl font-bold">
{formatDuration(totalDuration)} <NumberFlowDuration duration={totalDuration} variant='wordy' />
</div> </div>
<div className="text-sm text-muted-foreground">Duration</div> <div className="text-sm text-muted-foreground">Duration</div>
</div> </div>