Usage Card

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import { ChevronDown, ChevronUp } from "lucide-react";
5import * as React from "react";
6import { Button } from "@/components/ui/button";
7import { Progress } from "@/components/ui/progress";
8import { cn } from "@/lib/utils";
9 
10const usageCardVariants = cva(
11  "relative min-w-[280px] rounded-2xl border bg-card text-card-foreground",
12  {
13    variants: {
14      variant: {
15        default: "border-border",
16        elevated: "border-border shadow-lg",
17      },
18    },
19    defaultVariants: {
20      variant: "default",
21    },
22  },
23);
24 
25interface UsageCardProps
26  extends React.HTMLAttributes<HTMLDivElement>,
27    VariantProps<typeof usageCardVariants> {}
28 
29const UsageCard = React.forwardRef<HTMLDivElement, UsageCardProps>(
30  ({ className, variant, ...props }, ref) => (
31    <div
32      ref={ref}
33      className={cn(usageCardVariants({ variant, className }))}
34      {...props}
35    />
36  ),
37);
38UsageCard.displayName = "UsageCard";
39 
40interface UsageCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
41 
42const UsageCardHeader = React.forwardRef<HTMLDivElement, UsageCardHeaderProps>(
43  ({ className, ...props }, ref) => (
44    <div
45      ref={ref}
46      className={cn(
47        "flex items-center justify-between gap-4 p-4 pb-0",
48        className,
49      )}
50      {...props}
51    />
52  ),
53);
54UsageCardHeader.displayName = "UsageCardHeader";
55 
56interface UsageCardPeriodProps extends React.HTMLAttributes<HTMLSpanElement> {
57  daysRemaining?: number;
58}
59 
60const UsageCardPeriod = React.forwardRef<HTMLSpanElement, UsageCardPeriodProps>(
61  ({ className, daysRemaining, children, ...props }, ref) => (
62    <span
63      ref={ref}
64      className={cn("text-sm font-medium text-foreground", className)}
65      {...props}
66    >
67      {children ??
68        (daysRemaining !== undefined &&
69          `${daysRemaining} days remaining in cycle`)}
70    </span>
71  ),
72);
73UsageCardPeriod.displayName = "UsageCardPeriod";
74 
75interface UsageCardActionProps
76  extends React.ComponentPropsWithoutRef<typeof Button> {}
77 
78const UsageCardAction = React.forwardRef<
79  HTMLButtonElement,
80  UsageCardActionProps
81>(({ className, ...props }, ref) => (
82  <Button
83    ref={ref}
84    variant="outline"
85    size="sm"
86    className={cn("rounded-full", className)}
87    {...props}
88  />
89));
90UsageCardAction.displayName = "UsageCardAction";
91 
92interface UsageCardSummaryProps extends React.HTMLAttributes<HTMLDivElement> {}
93 
94const UsageCardSummary = React.forwardRef<
95// … truncated