"use client" import { TrendingUp, TrendingDown, Minus } from "lucide-react" import { cn } from "@/lib/utils" import { demoStats } from './demo/miscellaneous' /** * Represents a single statistic card with trend data. * @interface StatCard * @property {string} [label] - Label for the stat (e.g., "Sales", "Orders") * @property {string | number} [value] - The stat value to display * @property {number} [change] - Percentage change value * @property {string} [changeLabel] - Additional context for the change * @property {React.ReactNode} [icon] - Optional icon for the stat * @property {"up" | "down" | "neutral"} [trend] - Trend direction */ export interface StatCard { label?: string value?: string | number change?: number changeLabel?: string icon?: React.ReactNode trend?: "up" | "down" | "neutral" } /** * ═══════════════════════════════════════════════════════════════════════════ * StatCardProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for the StatCard component, which displays a grid of statistic cards * with values, trend indicators, and optional icons. */ export interface StatCardProps { data?: { /** Array of stat cards to display in the grid. */ stats?: StatCard[] } } /** * A statistics card grid displaying key metrics with trend indicators. * Shows stats in a responsive 2-3 column grid layout. * * Features: * - Trend indicators (up, down, neutral) with colors * - Percentage change display * - Optional icons per stat * - Responsive grid layout * - Optional change labels * * @component * @example * ```tsx * * ``` */ export function StatCard({ data }: StatCardProps) { const resolved: NonNullable = data ?? { stats: demoStats } const stats = resolved.stats ?? [] const getTrendIcon = (trend?: "up" | "down" | "neutral") => { switch (trend) { case "up": return case "down": return default: return } } const getTrendColor = (trend?: "up" | "down" | "neutral") => { switch (trend) { case "up": return "text-green-600" case "down": return "text-red-600" default: return "text-muted-foreground" } } return (

{stats.map((stat, index) => { return (

{(stat.label || stat.icon) && (

{stat.label && ( {stat.label} )} {stat.icon}

)} {(stat.value !== undefined || stat.change !== undefined) && (

{stat.value !== undefined && ( {stat.value} )} {stat.change !== undefined && ( {getTrendIcon(stat.trend)} {Math.abs(stat.change)}% )}

)} {stat.changeLabel && ( {stat.changeLabel} )}

) })}

) }