Progress

"use client";
import React from "react";
import { Progress, type ProgressProps } from "@/ui/progress";

export function ProgressDemo() {
  const [progress, setProgress] = React.useState({ details: 0, address: 0, important: 0, animated: true });

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(p => ({ ...p, details: 35, address: 28, important: 25 })), 500);
    return () => clearTimeout(timer);
  }, []);

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(p => ({ ...p, animated: false })), 2850);
    return () => clearTimeout(timer);
  }, []);

  return (
    <Progress size={16} transitionDuration={2000} animated={progress.animated} classNames={{ root: "m-auto max-w-2xl", label: "text-white" }}>
      <Progress.Section value={progress.details} color="#0c8599">
        <Progress.Label label="Details" />
      </Progress.Section>
      <Progress.Section value={progress.address} color="#c2255c">
        <Progress.Label label="Address" />
      </Progress.Section>
      <Progress.Section value={progress.important} label="Important" color="#e8590c" />
    </Progress>
  );
}