indevuiProgress

// demo.tsx
'use client';

import * as React from 'react';
import Progress from '@/components/ui/indevui-progress';

function ProgressDemo() {
  const [progress, setProgress] = React.useState(10);

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(80), 1000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="flex w-full max-w-md flex-col items-center gap-6 p-4">
      <div className="w-full">
        <p className="mb-2 text-sm text-muted-foreground">Static Value (30%)</p>
        <Progress value={30} />
      </div>
      <div className="w-full">
        <p className="mb-2 text-sm text-muted-foreground">Dynamic Value ({progress}%)</p>
        <Progress value={progress} />
      </div>
      <div className="w-full">
        <p className="mb-2 text-sm text-muted-foreground">Custom Height & Color</p>
        <Progress value={55} className="h-4 bg-red-500/20 [&>[data-slot=progress-indicator]]:bg-red-500" />
      </div>
    </div>
  );
}

export { ProgressDemo as DemoOne };