diff --git a/src/components/ui/number-flow-size.tsx b/src/components/ui/number-flow-size.tsx new file mode 100644 index 0000000..56a1a8b --- /dev/null +++ b/src/components/ui/number-flow-size.tsx @@ -0,0 +1,22 @@ +import NumberFlow from '@number-flow/react' +import { formatSizeObject } from '@/utils/format-size' + +interface NumberFlowSizeProps { + size: number + binary?: boolean + className?: string +} + +export function NumberFlowSize({ + size, + binary = true, + className +}: NumberFlowSizeProps) { + const sizeObj = formatSizeObject(size, binary) + + return ( + + {sizeObj.unit} + + ) +} \ No newline at end of file diff --git a/src/lib/format.ts b/src/lib/format.ts deleted file mode 100644 index c0d20c7..0000000 --- a/src/lib/format.ts +++ /dev/null @@ -1,38 +0,0 @@ -/** - * Utility functions for formatting data for display - */ - -export function formatDuration(durationMs: number): string { - if (!durationMs) return "0s" - - const totalSeconds = Math.floor(durationMs / 1000) - const hours = Math.floor(totalSeconds / 3600) - const minutes = Math.floor((totalSeconds % 3600) / 60) - const seconds = totalSeconds % 60 - - if (hours > 0) { - return `${hours}h ${minutes}m ${seconds}s` - } - if (minutes > 0) { - return `${minutes}m ${seconds}s` - } - return `${seconds}s` -} - -export function formatFileSize(sizeBytes: number): string { - if (!sizeBytes) return "0 B" - - const units = ["B", "KB", "MB", "GB", "TB"] - let size = sizeBytes - let unitIndex = 0 - - while (size >= 1024 && unitIndex < units.length - 1) { - size /= 1024 - unitIndex++ - } - - if (unitIndex === 0) { - return `${Math.floor(size)} ${units[unitIndex]}` - } - return `${size.toFixed(1)} ${units[unitIndex]}` -} \ No newline at end of file diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx index dd05afd..cfd31f5 100644 --- a/src/pages/DashboardPage.tsx +++ b/src/pages/DashboardPage.tsx @@ -4,10 +4,9 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Button } from '@/components/ui/button' import { Volume2, Play, Clock, HardDrive, Music, Trophy, Loader2, RefreshCw } from 'lucide-react' -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' +import { NumberFlowSize } from '@/components/ui/number-flow-size' interface SoundboardStatistics { sound_count: number @@ -315,14 +314,7 @@ export function DashboardPage() {
- {(() => { - const sizeObj = formatSizeObject(soundboardStatistics.total_size, true) - return ( - <> - {sizeObj.unit} - - ) - })()} +

Original + normalized files @@ -384,14 +376,7 @@ export function DashboardPage() {

- {(() => { - const sizeObj = formatSizeObject(trackStatistics.total_size, true) - return ( - <> - {sizeObj.unit} - - ) - })()} +

Original + normalized files