circular-progress-colors-demo

1"use client";
2 
3import { motion, useInView, useMotionValue, useSpring } from "motion/react";
4import * as React from "react";
5import { cn } from "@/lib/utils";
6import {
7  CircularProgress,
8  CircularProgressIndicator,
9  CircularProgressRange,
10  CircularProgressTrack,
11  CircularProgressValueText,
12} from "@/registry/bases/base/ui/circular-progress";
13 
14const themes = [
15  {
16    name: "Default",
17    trackClass: "text-muted-foreground/20",
18    rangeClass: "text-primary",
19    textClass: "text-foreground",
20  },
21  {
22    name: "Success",
23    trackClass: "text-green-200 dark:text-green-900",
24    rangeClass: "text-green-500",
25    textClass: "text-green-700 dark:text-green-300",
26  },
27  {
28    name: "Warning",
29    trackClass: "text-yellow-200 dark:text-yellow-900",
30    rangeClass: "text-yellow-500",
31    textClass: "text-yellow-700 dark:text-yellow-300",
32  },
33  {
34    name: "Destructive",
35    trackClass: "text-red-200 dark:text-red-900",
36    rangeClass: "text-red-500",
37    textClass: "text-red-700 dark:text-red-300",
38  },
39  {
40    name: "Purple",
41    trackClass: "text-purple-200 dark:text-purple-900",
42    rangeClass: "text-purple-500",
43    textClass: "text-purple-700 dark:text-purple-300",
44  },
45  {
46    name: "Orange",
47    trackClass: "text-orange-200 dark:text-orange-900",
48    rangeClass: "text-orange-500",
49    textClass: "text-orange-700 dark:text-orange-300",
50  },
51  {
52    name: "Blue",
53    trackClass: "text-blue-200 dark:text-blue-900",
54    rangeClass: "text-blue-500",
55    textClass: "text-blue-700 dark:text-blue-300",
56  },
57  {
58    name: "Pink",
59    trackClass: "text-pink-200 dark:text-pink-900",
60    rangeClass: "text-pink-500",
61    textClass: "text-pink-700 dark:text-pink-300",
62  },
63];
64 
65export default function CircularProgressColorsDemo() {
66  return (
67    <>
68      <div className="hidden grid-cols-4 gap-4 sm:grid">
69        {themes.map((theme, index) => (
70          <AnimatedCircularProgress
71            key={theme.name}
72            theme={theme}
73            index={index}
74          />
75        ))}
76      </div>
77      <div className="grid grid-cols-2 gap-4 sm:hidden">
78        {themes.slice(0, 4).map((theme, index) => (
79          <AnimatedCircularProgress
80            key={theme.name}
81            theme={theme}
82            index={index}
83          />
84        ))}
85      </div>
86    </>
87  );
88}
89 
90interface AnimatedCircularProgressProps {
91  theme: (typeof themes)[0];
92  index: number;
93}
94 
95function AnimatedCircularProgress({
96  theme,
97  index,
98}: AnimatedCircularProgressProps) {
99// … truncated