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

feat: add NumberFlowDuration component for enhanced duration display in DashboardPage

Browse Source
This commit is contained in:
JSC
2025-08-12 22:03:40 +02:00
parent fb80806819
commit ccd5973db9
2 changed files with 95 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/DashboardPage.tsx
View File

@@ -7,6 +7,7 @@ import { Volume2, Play, Clock, HardDrive, Music, Trophy, Loader2, RefreshCw } fr
import { formatDuration } from '@/lib/format'
import NumberFlow from '@number-flow/react'
import { formatSizeObject } from '@/utils/format-size'
import { NumberFlowDuration } from '@/components/ui/number-flow-duration'
interface SoundboardStatistics {
sound_count: number
@@ -298,7 +299,9 @@ export function DashboardPage() {
<Clock className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{formatDuration(soundboardStatistics.total_duration)}</div>
<div className="text-2xl font-bold">
<NumberFlowDuration duration={soundboardStatistics.total_duration} variant='wordy' />
</div>
<p className="text-xs text-muted-foreground">
Combined audio duration
</p>
@@ -365,7 +368,9 @@ export function DashboardPage() {
<Clock className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{formatDuration(trackStatistics.total_duration)}</div>
<div className="text-2xl font-bold">
<NumberFlowDuration duration={trackStatistics.total_duration} variant='wordy' />
</div>
<p className="text-xs text-muted-foreground">
Combined track duration
</p>
@@ -478,7 +483,7 @@ export function DashboardPage() {
{sound.duration && (
<span className="flex items-center gap-1">
<Clock className="h-3 w-3" />
{formatDuration(sound.duration)}
<NumberFlowDuration duration={sound.duration} variant='wordy' />
</span>
)}
<span className="px-1.5 py-0.5 bg-secondary rounded text-xs">