Progress With Value Custom Label

1"use client";
2import React, { useEffect, useState } from "react";
3// import { ProgressWithValue } from '@/components/ui/progress-with-value';
4import { ProgressWithValue } from "@/app/registry/spectrumui/progress-with-value-dependencies";
5 
6const PERCENTAGE = [0, 10, 15, 30, 45, 50, 65, 80, 90, 100];
7 
8const LABEL_DEMOS = [
9  {
10    title: "No Label",
11    label: () => null,
12  },
13  {
14    title: "Custom label",
15    label: (value?: number | null) => (
16      <span className="text-amber-400">current: {value}%</span>
17    ),
18  },
19];
20 
21const ProgressWithValueLabel = () => {
22  const [value, setValue] = useState(20);
23  useEffect(() => {
24    let index = 0;
25    const interval = setInterval(() => {
26      setValue(PERCENTAGE[index % PERCENTAGE.length]);
27      index++;
28    }, 1000);
29    return () => clearInterval(interval);
30  }, []);
31 
32  return (
33    <div className="w-full space-y-2 px-10">
34      {LABEL_DEMOS.map((demo) => (
35        <div key={demo.title}>
36          <div className="text-blue-500">{demo.title}</div>
37          <ProgressWithValue
38            value={value}
39            position="follow"
40            label={demo.label}
41          />
42        </div>
43      ))}
44    </div>
45  );
46};
47 
48export default ProgressWithValueLabel;