Metric Card

1import type { VariantProps } from "class-variance-authority";
2import { cva } from "class-variance-authority";
3import { ChevronDown, ChevronUp } from "lucide-react";
4 
5import { Badge } from "@/components/ui/badge";
6 
7import { cn } from "@/lib/utils";
8 
9const metricCardVariants = cva(
10  "flex flex-col gap-1 border rounded-lg px-3 py-2 text-card-foreground",
11  {
12    variants: {
13      variant: {
14        default: "border-input bg-card",
15        ghost: "border-transparent",
16        destructive: "border-destructive/80 bg-destructive/10",
17        success: "border-success/80 bg-success/10",
18        warning: "border-warning/80 bg-warning/10",
19      },
20    },
21    defaultVariants: {
22      variant: "default",
23    },
24  },
25);
26 
27export function MetricCard({
28  children,
29  className,
30  variant,
31  ...props
32}: React.ComponentProps<"div"> & VariantProps<typeof metricCardVariants>) {
33  return (
34    <div
35      data-variant={variant}
36      className={cn(metricCardVariants({ variant, className }), "group/metric")}
37      {...props}
38    >
39      {children}
40    </div>
41  );
42}
43 
44export function MetricCardTitle({
45  children,
46  className,
47  ...props
48}: React.ComponentProps<"p">) {
49  return (
50    <p className={cn("font-medium text-sm", className)} {...props}>
51      {children}
52    </p>
53  );
54}
55 
56export function MetricCardHeader({
57  children,
58  className,
59  ...props
60}: React.ComponentProps<"div">) {
61  return (
62    <div
63      className={cn(
64        "text-muted-foreground",
65        "group-data-[variant=destructive]/metric:text-destructive",
66        "group-data-[variant=success]/metric:text-success",
67        "group-data-[variant=warning]/metric:text-warning",
68        className,
69      )}
70      {...props}
71    >
72      {children}
73    </div>
74  );
75}
76 
77export function MetricCardValue({
78  children,
79  className,
80  ...props
81}: React.ComponentProps<"p">) {
82  return (
83    <p className={cn("font-semibold text-foreground", className)} {...props}>
84      {children}
85    </p>
86  );
87}
88 
89export function MetricCardGroup({
90  children,
91  className,
92  ...props
93}: React.ComponentProps<"div">) {
94  return (
95    <div
96      className={cn(
97        "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
98        className,
99      )}
100      {...props}
101    >
102      {children}
103    </div>
104  );
105}
106 
107const badgeVariants = cva("px-1.5 font-mono text-[10px]", {
108  variants: {
109    variant: {
110      default: "border-border",
111      increase:
112        "border-destructive/20 bg-destructive/10 hover:bg-destructive/10 text-destructive",
113// … truncated