Usage Meter Linear

1"use client";
2 
3import { cn } from "@/lib/utils";
4import {
5  Card,
6  CardContent,
7  CardDescription,
8  CardHeader,
9  CardTitle,
10} from "@/components/ui/card";
11import { Badge } from "@/components/ui/badge";
12import { motion, useSpring, useMotionValue, useTransform } from "motion/react";
13import { useEffect } from "react";
14import type React from "react";
15 
16export interface Usage {
17  name: string;
18  usage: number;
19  limit: number;
20}
21 
22export interface UsageMeterProps {
23  usage: Usage[];
24  className?: string;
25  variant?: "linear" | "circle";
26  size?: "sm" | "md" | "lg";
27  title?: string;
28  description?: string;
29  progressColor?: "default" | "usage";
30}
31 
32function CircleUsageItem({
33  item,
34  config,
35  radius,
36  circumference,
37  progressColor,
38  getUsageClasses,
39  getStatus,
40}: {
41  item: Usage;
42  config: { circle: number; stroke: number; text: string; label: string };
43  radius: number;
44  circumference: number;
45  progressColor: "default" | "usage";
46  getUsageClasses: (
47    percentage: number,
48    variant: "circle" | "linear",
49  ) => string[];
50  getStatus: (percentage: number) => React.ReactNode;
51}) {
52  const percentage = Math.min((item.usage / item.limit) * 100, 100);
53  const remaining = Math.max(item.limit - item.usage, 0);
54 
55  const motionValue = useMotionValue(0);
56  const springValue = useSpring(motionValue, { stiffness: 100, damping: 20 });
57  const display = useTransform(
58    springValue,
59    (latest) => `${Math.round(latest)}%`,
60  );
61 
62  useEffect(() => {
63    motionValue.set(percentage);
64  }, [percentage, motionValue]);
65 
66  return (
67    <div className="bg-muted/20 flex flex-col items-center space-y-3 rounded-xl p-4 text-center">
68      <span className="w-full truncate text-sm font-medium">{item.name}</span>
69      <div className="relative">
70        <svg
71          width={config.circle}
72          height={config.circle}
73          className="-rotate-90"
74        >
75          <circle
76            cx={config.circle / 2}
77            cy={config.circle / 2}
78            r={radius}
79            strokeWidth={config.stroke}
80            className="text-muted stroke-current"
81            fill="transparent"
82          />
83          <motion.circle
84            cx={config.circle / 2}
85            cy={config.circle / 2}
86            r={radius}
87            strokeWidth={config.stroke}
88            fill="transparent"
89            strokeDasharray={circumference}
90            strokeLinecap="round"
91            className={cn(
92              "stroke-current",
93              progressColor === "usage"
94// … truncated