blob: 60c585a346a6cac31ab138fc3b58a55f7f8ad9d2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import { FC } from 'react';
import styles from './progress-bar.module.scss';
export type ProgressBarProps = {
/**
* Current value.
*/
current: number;
/**
* The progress bar id.
*/
id: string;
/**
* The progress bar label.
*/
label: string;
/**
* Minimal value.
*/
min: number;
/**
* Maximal value.
*/
max: number;
};
/**
* ProgressBar component
*
* Render a progress bar.
*/
const ProgressBar: FC<ProgressBarProps> = ({
current,
id,
label,
min,
max,
}) => {
return (
<div className={styles.progress}>
<label htmlFor={id} className={styles.progress__info}>
{label}
</label>
<progress
className={styles.progress__bar}
id={id}
max={max}
value={current}
aria-valuemin={min}
aria-valuemax={max}
aria-valuenow={current}
>
{current}/{max}
</progress>
</div>
);
};
export default ProgressBar;
|
