Number Ticker Real-Time Metrics Counter

"use client";

import NumberTicker from "@/components/ui/number-ticker-05";
import { useEffect, useState } from "react";

const NumberTickerDemo = () => {
  const [val, setVal] = useState(48250);

  useEffect(() => {
    const interval = setInterval(() => {
      setVal((v) => Number(v) + Math.floor(Math.random() * 50));
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="flex flex-col items-center gap-4">
      <NumberTicker
        value={val}
        label="active users"
        className="text-foreground font-medium lg:text-5xl sm:text-4xl text-3xl tabular-nums"
      />
    </div>
  );
};

export default NumberTickerDemo;