A known amount and an unknown one

// apps/docs/examples/ui/progress.tsx'use client';
import {useEffect, useState} from 'react';
import {Button} from '@workspace/active-ui/components/primitives/button';import {  Progress,  ProgressLabel,  ProgressValue,} from '@workspace/active-ui/components/primitives/progress';
/** * How far a task has come: an upload that advances (simulated with a * timer), with its label and its value as text, and a task of unknown * length (`value={null}`). */export default function ProgressExample() {  const [value, setValue] = useState(0);  const [running, setRunning] = useState(false);  useEffect(() => {    if (!running) return;    const timer = window.setInterval(() => {      setValue((current) => {        if (current >= 100) {          setRunning(false);          return 100;        }        return current + 10;      });    }, 300);    return () => window.clearInterval(timer);  }, [running]);  return (    <div className="flex w-full max-w-sm flex-col gap-8">      <div className="flex flex-col gap-3">        <Progress value={value}>          <ProgressLabel>Uploading participants.csv</ProgressLabel>          <ProgressValue />        </Progress>        <Button          variant="outline"          size="sm"          className="self-start"          disabled={running}          onClick={() => {            setValue(0);            setRunning(true);          }}        >          {value === 100 ? 'Upload again' : 'Start the upload'}        </Button>      </div>      <Progress value={null}>        <ProgressLabel>Checking the addresses</ProgressLabel>      </Progress>    </div>  );}