34 lines
830 B
TypeScript
34 lines
830 B
TypeScript
import type { CSSProperties } from "react";
|
|
import { clampPercent } from "../../format";
|
|
import type { UiSeverity } from "../../types";
|
|
|
|
export interface ProgressMeterProps {
|
|
value?: number;
|
|
severity?: UiSeverity;
|
|
label?: string;
|
|
}
|
|
|
|
export function ProgressMeter({
|
|
value,
|
|
severity = "neutral",
|
|
label = "Progress",
|
|
}: ProgressMeterProps) {
|
|
const progress = value === undefined ? null : clampPercent(value);
|
|
|
|
return (
|
|
<div
|
|
className="progress-meter"
|
|
data-severity={severity}
|
|
role="meter"
|
|
aria-label={label}
|
|
aria-valuemin={0}
|
|
aria-valuemax={100}
|
|
aria-valuenow={progress ?? undefined}
|
|
data-empty={progress === null}
|
|
>
|
|
{progress !== null ? (
|
|
<span style={{ "--meter-progress": `${progress}%` } as CSSProperties} />
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|