1import { useEffect, useState } from 'react';
2
3import { Progress } from '@proton/components';
4
5import { getTitle } from '../../helpers/title';
6import mdx from './Progress.mdx';
7
8export default {
9    component: Progress,
10    title: getTitle(__filename, false),
11    parameters: {
12        docs: {
13            page: mdx,
14        },
15    },
16};
17
18export const Basic = () => {
19    const [value, setValue] = useState(0);
20    const increment = () => setValue(value + 5);
21    const className = value < 50 ? 'progress-bar--warning' : 'progress-bar--error';
22
23    useEffect(() => {
24        const intervalID = setInterval(increment, 5000);
25
26        return () => {
27            clearInterval(intervalID);
28        };
29    }, []);
30
31    return <Progress value={value} className={className} />;
32};