Modern Verticle Progress

"use client";

import { useState } from "react";
import { useEffect } from "react";
import { Component } from "@/components/ui/modern-verticle-progress";

export default function DemoOne() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(progress + 1);
    }, 100);
    return () => clearInterval(interval);
  }, [progress]);

  return (
    <div className="w-full h-full flex items-center justify-center max-w-xl">
      <Component
        value={progress}
        className="border-purple-500"
        indicatorClassName="bg-purple-500"
        showText
      />
    </div>
  );
};