17 lines
627 B
TypeScript
17 lines
627 B
TypeScript
export function ProgressBar({ value, label }: { value: number; label?: string }) {
|
|
const tone = value > 100 ? "bg-coral" : value >= 80 ? "bg-saffron" : "bg-mint";
|
|
return (
|
|
<div>
|
|
{label ? (
|
|
<div className="mb-2 flex justify-between text-sm text-ink/65 dark:text-paper/65">
|
|
<span>{label}</span>
|
|
<span>{value}%</span>
|
|
</div>
|
|
) : null}
|
|
<div className="h-2.5 overflow-hidden rounded-full bg-forest/10 dark:bg-white/10">
|
|
<div className={`${tone} h-full rounded-full transition-all`} style={{ width: `${Math.min(value, 115)}%` }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|