Animated Circular Progress Bar

"use client";

import { useEffect, useState } from "react";

import { AnimatedCircularProgressBar } from "@/lab/magicui/ui/animated-circular-progress-bar";

export default function AnimatedCircularProgressBarDemo() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    const handleIncrement = (prev: number) => (prev === 100 ? 0 : prev + 10);
    const first = setTimeout(() => setValue(handleIncrement), 100);
    const interval = setInterval(() => setValue(handleIncrement), 2000);
    return () => {
      clearTimeout(first);
      clearInterval(interval);
    };
  }, []);

  return (
    <div className="relative flex h-full w-full items-center justify-center text-neutral-950">
      <AnimatedCircularProgressBar
        value={value}
        gaugePrimaryColor="rgb(79 70 229)"
        gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
      />
    </div>
  );
}