Progress

"use client";

import * as React from "react";

import {
  Progress,
  ProgressRing,
  Spinner,
} from "@/components/ui/progress";

export function ProgressDemo() {
  const [value, setValue] = React.useState(15);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setValue((current) => (current >= 95 ? 15 : current + 20));
    }, 1600);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="flex w-full max-w-sm flex-col items-center gap-8">
      <Progress value={value} aria-label="Upload progress" />
      <div className="flex items-center gap-8">
        <ProgressRing value={value} />
        <Spinner />
      </div>
    </div>
  );
}