Stat Card

1"use client"
2 
3import { TrendingUp, TrendingDown, Minus } from "lucide-react"
4import { cn } from "@/lib/utils"
5import { demoStats } from './demo/miscellaneous'
6 
7/**
8 * Represents a single statistic card with trend data.
9 * @interface StatCard
10 * @property {string} [label] - Label for the stat (e.g., "Sales", "Orders")
11 * @property {string | number} [value] - The stat value to display
12 * @property {number} [change] - Percentage change value
13 * @property {string} [changeLabel] - Additional context for the change
14 * @property {React.ReactNode} [icon] - Optional icon for the stat
15 * @property {"up" | "down" | "neutral"} [trend] - Trend direction
16 */
17export interface StatCard {
18  label?: string
19  value?: string | number
20  change?: number
21  changeLabel?: string
22  icon?: React.ReactNode
23  trend?: "up" | "down" | "neutral"
24}
25 
26/**
27 * ═══════════════════════════════════════════════════════════════════════════
28 * StatCardProps
29 * ═══════════════════════════════════════════════════════════════════════════
30 *
31 * Props for the StatCard component, which displays a grid of statistic cards
32 * with values, trend indicators, and optional icons.
33 */
34export interface StatCardProps {
35  data?: {
36    /** Array of stat cards to display in the grid. */
37    stats?: StatCard[]
38  }
39}
40 
41 
42/**
43 * A statistics card grid displaying key metrics with trend indicators.
44 * Shows stats in a responsive 2-3 column grid layout.
45 *
46 * Features:
47 * - Trend indicators (up, down, neutral) with colors
48 * - Percentage change display
49 * - Optional icons per stat
50 * - Responsive grid layout
51 * - Optional change labels
52 *
53 * @component
54 * @example
55 * ```tsx
56 * <StatCard
57 *   data={{
58 *     stats: [
59 *       { label: "Revenue", value: "$12,543", change: 12.5, trend: "up" },
60 *       { label: "Orders", value: "342", change: -3.2, trend: "down" },
61 *       { label: "Customers", value: "1,205", change: 0, trend: "neutral" }
62 *     ]
63 *   }}
64 * />
65 * ```
66 */
67export function StatCard({ data }: StatCardProps) {
68  const resolved: NonNullable<StatCardProps['data']> = data ?? { stats: demoStats }
69  const stats = resolved.stats ?? []
70  const getTrendIcon = (trend?: "up" | "down" | "neutral") => {
71    switch (trend) {
72// … truncated