// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats 04 * @description Stats cards with decorative icons and trend indicators. * Great for dashboard-style displays with performance metrics. * * @slots stats, stats-container, stats-grid, stats-card, stats-header, * stats-icon-wrapper, stats-trend, stats-value, stats-label * @variant trends * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { Users, DollarSign, ShoppingCart, TrendingUp, TrendingDown, type LucideIcon, } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface TrendConfig { /** Trend percentage value */ value: number /** Whether the trend is positive */ isPositive: boolean } interface StatItemConfig { /** Unique identifier for list key */ id: string /** Stat value (e.g., "12,345", "$54,321") */ value: string /** Stat label */ label: string /** Icon component */ icon: LucideIcon /** Trend indicator */ trend?: TrendConfig } interface Stats04Props { /** Array of stats to display */ stats?: StatItemConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_STATS: StatItemConfig[] = [ { id: "stat-users", value: "12,345", label: "Total Users", icon: Users, trend: { value: 12.5, isPositive: true }, }, { id: "stat-revenue", value: "$54,321", label: "Revenue", icon: DollarSign, trend: { value: 8.2, isPositive: true }, }, { id: "stat-orders", value: "1,234", label: "Orders", icon: ShoppingCart, trend: { value: 3.1, isPositive: false }, }, { id: "stat-conversion", value: "89.7%", label: "Conversion Rate", icon: TrendingUp, trend: { value: 2.4, isPositive: true }, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Stats04({ stats = DEFAULT_STATS, className, idBase, }: Stats04Props) { const sectionId = `${idBase ?? "stats-04"}-section` return (

Statistics

{stats.map((stat) => { const IconComponent = stat.icon return (

{stat.trend && (

{stat.trend.isPositive ? (

)}

{stat.value}

{stat.label}

) })}

) } export default Stats04 export { Stats04, type Stats04Props, type StatItemConfig, type TrendConfig }