17 lines
661 B
TypeScript
17 lines
661 B
TypeScript
|
export function MetricBar({ label, percent, detail }: { label: string; percent: number; detail: string }) {
|
||
|
|
return (
|
||
|
|
<div className="flex flex-1 flex-col gap-1">
|
||
|
|
<div className="flex items-center justify-between text-[11px] text-fg-muted">
|
||
|
|
<span>{label}</span>
|
||
|
|
<span className="font-mono tabular-nums text-fg">{detail}</span>
|
||
|
|
</div>
|
||
|
|
<div className="h-1 overflow-hidden rounded-full bg-surface-raised">
|
||
|
|
<div
|
||
|
|
className="h-full rounded-full bg-accent transition-[width] duration-500 ease-out"
|
||
|
|
style={{ width: `${Math.min(100, Math.max(0, percent))}%` }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|