MetricCard

1import { cva, type VariantProps } from "class-variance-authority"
2 
3import { Badge } from "@/components/ui/badge"
4import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
5import { Skeleton } from "@/components/ui/skeleton"
6import { cn } from "@/lib/utils"
7 
8export type MetricTrendDirection = "up" | "down" | "neutral"
9 
10const metricCardVariants = cva("w-full max-w-md overflow-hidden transition-opacity", {
11  variants: {
12    variant: {
13      default: "bg-card shadow-sm",
14      elevated: "bg-card shadow-lg shadow-foreground/5",
15      subtle: "bg-muted/40 shadow-none",
16    },
17    size: {
18      sm: "",
19      md: "",
20      lg: "",
21    },
22  },
23  defaultVariants: {
24    variant: "default",
25    size: "md",
26  },
27})
28 
29const metricContentSize = {
30  sm: { header: "p-4 pb-2", content: "p-4 pt-0", value: "text-3xl" },
31  md: { header: "p-5 pb-2", content: "p-5 pt-0", value: "text-4xl" },
32  lg: { header: "p-6 pb-3", content: "p-6 pt-0", value: "text-5xl" },
33} as const
34 
35export interface MetricCardProps extends VariantProps<typeof metricCardVariants> {
36  label: string
37  value: string
38  trend?: {
39    direction: MetricTrendDirection
40    delta: string
41  }
42  context?: string
43  isLoading?: boolean
44  isDisabled?: boolean
45  error?: {
46    title: string
47    description?: string
48  }
49  className?: string
50}
51 
52const trendClassName: Record<MetricTrendDirection, string> = {
53  up: "border-emerald-200 bg-emerald-100 text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-900/30 dark:text-emerald-400",
54  down: "border-red-200 bg-red-100 text-red-700 dark:border-red-900/40 dark:bg-red-900/30 dark:text-red-400",
55  neutral: "border-border bg-muted text-muted-foreground",
56}
57 
58export function MetricCard({
59  label,
60  value,
61  trend,
62  context,
63  isLoading,
64  isDisabled,
65  error,
66  variant,
67  size,
68  className,
69}: MetricCardProps) {
70  const resolvedSize = size ?? "md"
71  const sizeClasses = metricContentSize[resolvedSize]
72  const hasMetric = label.trim().length > 0 && value.trim().length > 0
73 
74  return (
75    <Card
76      className={cn(
77        metricCardVariants({ variant, size }),
78        isDisabled && "pointer-events-none opacity-50",
79        className,
80      )}
81      data-fable-ui="metric-card"
82      aria-busy={isLoading || undefined}
83    >
84      <CardHeader className={sizeClasses.header}>
85        <CardTitle className="break-words text-sm font-medium leading-none text-muted-foreground">
86          {isLoading ? <Skeleton className="h-4 w-28" /> : label || "Metric"}
87// … truncated