32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { Label, ProgressBar as AriaProgressBar } from 'react-aria-components';
|
|
|
|
import styles from './ProgressBar.module.css';
|
|
|
|
interface Props {
|
|
label: string;
|
|
/** A share from 0 to 1. */
|
|
value: number;
|
|
/** The value spelled out: the caller knows the unit, this primitive does not. */
|
|
valueLabel: string;
|
|
}
|
|
|
|
/**
|
|
* How far a long operation has got.
|
|
*
|
|
* Determinate only, and deliberately so: an indeterminate bar is a stripe that travels forever, and
|
|
* this shell photographs itself — the screenshot cycle waits for every animation to come to rest
|
|
* (scripts/shot.mjs). A share that is not known is a state for words, not for a bar.
|
|
*/
|
|
export function ProgressBar({ label, value, valueLabel }: Props) {
|
|
return (
|
|
<AriaProgressBar className={styles.progress} value={value * 100} valueLabel={valueLabel}>
|
|
<div className={styles.head}>
|
|
<Label className={styles.label}>{label}</Label>
|
|
<span className={styles.value}>{valueLabel}</span>
|
|
</div>
|
|
<div className={styles.track}>
|
|
<span className={styles.fill} style={{ '--progress': value }} />
|
|
</div>
|
|
</AriaProgressBar>
|
|
);
|
|
}
|