ProgressBar

import { useEffect, useState } from "react";


export default function Demo() {
  const [value, setValue] = useState(0);
  const [status, setStatus] = useState("inProgress");
  const [run, setRun] = useState(false);
  const [error, setError] = useState(false);


  useEffect(() => {
    const interval = setInterval(() => {
      if (value === 100) {
        setRun(false);
        clearInterval(interval);
        setStatus("completed");
      } else if (error && value === 30) {
        clearInterval(interval);
        setStatus("error");
      } else if (run) setValue((p) => p + 10);
    }, 150);
    return () => clearInterval(interval);
  }, [value, run, error]);


  return (
    <div className="flex flex-col gap-xs">
      <div className="flex gap-sm">
        <HvCheckBox
          label="Error"
          checked={error}
          onChange={(e) => {
            setError(e.target.checked);
          }}
        />
        <HvButton
          onClick={() => {
            setRun(true);
            setValue(0);
          }}
        >
          Start
        </HvButton>
      </div>
      <HvProgressBar
        value={value}
        status={status as HvProgressBarStatus}
        hideLabel={false}
        style={{ width: "100%" }}
      />
    </div>
  );
}