'use client'; import { Card, CardContent } from '@/components/ui/card'; import { cn } from '@/lib/utils'; interface Props { title?: string; used?: number; total?: number; usedLabel?: string; totalLabel?: string; segments?: { label: string; value: number; color: string; }[]; className?: string; } const defaultSegments: NonNullable = [ { label: 'Documents', value: 2400, color: 'bg-blue-500' }, { label: 'Photos', value: 1800, color: 'bg-emerald-500' }, { label: 'Videos', value: 3200, color: 'bg-amber-500' }, { label: 'Music', value: 900, color: 'bg-purple-500' }, ]; export default function Stats13({ title = 'Using Storage', used = 8300, total = 15, usedLabel = 'MB', totalLabel = 'GB', segments = defaultSegments, className, }: Props) { const totalValue = total * 1000; const freeValue = totalValue - used; return (

{title}{' '} {used.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2, })}{' '} {usedLabel} {' '} of {total} {totalLabel}

{segments.map((segment) => { const percentage = (segment.value / totalValue) * 100; return (

); })}

{segments.map((segment) => (

))}

); }