Glass Gauge

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6interface GlassGaugeProps extends React.HTMLAttributes<HTMLDivElement> {
7  value: number
8  max?: number
9  size?: "sm" | "md" | "lg"
10  showValue?: boolean
11  label?: string
12  colorScheme?: "cyan" | "purple" | "green" | "orange" | "gradient"
13  animated?: boolean
14}
15 
16const sizes = {
17  sm: { size: 100, strokeWidth: 8, fontSize: "text-lg" },
18  md: { size: 150, strokeWidth: 10, fontSize: "text-2xl" },
19  lg: { size: 200, strokeWidth: 12, fontSize: "text-4xl" },
20}
21 
22const colorSchemes = {
23  cyan: { stroke: "stroke-cyan-500", glow: "from-cyan-500/40 to-blue-500/40" },
24  purple: { stroke: "stroke-purple-500", glow: "from-purple-500/40 to-pink-500/40" },
25  green: { stroke: "stroke-emerald-500", glow: "from-emerald-500/40 to-teal-500/40" },
26  orange: { stroke: "stroke-orange-500", glow: "from-orange-500/40 to-amber-500/40" },
27  gradient: { stroke: "", glow: "from-cyan-500/40 via-blue-500/40 to-purple-500/40" },
28}
29 
30const GlassGauge = React.forwardRef<HTMLDivElement, GlassGaugeProps>(
31  (
32    {
33      className,
34      value,
35      max = 100,
36      size = "md",
37      showValue = true,
38      label,
39      colorScheme = "cyan",
40      animated = true,
41      ...props
42    },
43    ref,
44  ) => {
45    const [displayValue, setDisplayValue] = React.useState(0)
46    const config = sizes[size]
47    const colors = colorSchemes[colorScheme]
48    const percentage = Math.min(Math.max((value / max) * 100, 0), 100)
49 
50    const radius = (config.size - config.strokeWidth) / 2
51    const circumference = radius * 2 * Math.PI
52    const strokeDashoffset = circumference - (percentage / 100) * circumference
53 
54    React.useEffect(() => {
55      if (!animated) {
56        setDisplayValue(value)
57        return
58      }
59 
60      const duration = 1000
61      const steps = 60
62      const increment = value / steps
63      let current = 0
64      let step = 0
65 
66      const timer = setInterval(() => {
67        step++
68        current = Math.min(current + increment, value)
69        setDisplayValue(Math.round(current))
70 
71        if (step >= steps) {
72          clearInterval(timer)
73          setDisplayValue(value)
74        }
75      }, duration / steps)
76 
77      return () => clearInterval(timer)
78    }, [value, animated])
79 
80    const gradientId = React.useId()
81 
82    return (
83      <div ref={ref} className={cn("relative inline-flex flex-col items-center", className)} {...props}>
84        {/* Glow effect */}
85        <div
86// … truncated