44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
/* ════════════════════════════ StorageGauge ════════════════════════════ */
|
|||
|
|
|
|||
|
|
interface StorageGaugeProps {
|
|||
|
|
usedGB: number;
|
|||
|
|
maxGB: number;
|
|||
|
|
label?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function StorageGauge({ usedGB, maxGB, label = 'Storage' }: StorageGaugeProps) {
|
|||
|
|
const pct = maxGB > 0 ? Math.min((usedGB / maxGB) * 100, 100) : 0;
|
|||
|
|
const color =
|
|||
|
|
pct > 90 ? 'bg-accent-rose' : pct > 70 ? 'bg-accent-amber' : 'bg-accent-cyan';
|
|||
|
|
|
|||
|
|
const textColor =
|
|||
|
|
pct > 90 ? 'text-accent-rose' : pct > 70 ? 'text-accent-amber' : 'text-accent-cyan';
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="glass rounded-xl p-5">
|
|||
|
|
<div className="flex items-center justify-between mb-2">
|
|||
|
|
<span className="text-xs text-surface-400">{label}</span>
|
|||
|
|
<span className={`text-xs font-mono font-medium ${textColor}`}>
|
|||
|
|
{usedGB.toFixed(1)} / {maxGB.toFixed(1)} GB
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="h-2.5 rounded-full bg-surface-700 overflow-hidden">
|
|||
|
|
<div
|
|||
|
|
className={`h-full rounded-full transition-all duration-700 ease-out ${color}`}
|
|||
|
|
style={{ width: `${pct}%` }}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between mt-1.5">
|
|||
|
|
<span className="text-[10px] text-surface-500">{pct.toFixed(0)}% gebruikt</span>
|
|||
|
|
{pct > 80 && (
|
|||
|
|
<span className="text-[10px] text-accent-rose flex items-center gap-1">
|
|||
|
|
⚠️ Bijna vol
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|