"use client" /** * @name Stats Cards 05 * @description Interactive expandable stats cards with details panel. * Stats that expand to show additional breakdown information. * * @slots stats, stats-container, stats-grid, stats-card, stats-card-main, * stats-card-icon, stats-card-content, stats-card-value, stats-card-label, * stats-card-expand, stats-card-details, stats-card-detail-item, * stats-card-detail-label, stats-card-detail-value * @variant expandable * * @registryDependencies card button * @dependencies lucide-react */ import * as React from "react" import { Users, DollarSign, ShoppingBag, TrendingUp, ChevronDown, ChevronUp } from "lucide-react" import { Card, CardContent } from "@/registry/ui/card" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type IconType = "users" | "dollar" | "shopping" | "trending" interface StatDetailConfig { id: string label: string value: string } interface StatCardConfig { id: string title: string value: string icon: IconType details: StatDetailConfig[] } interface StatsCards05Props { stats?: StatCardConfig[] className?: string idBase?: string } // ============================================================================ // ICON MAP // ============================================================================ const iconMap: Record = { users: Users, dollar: DollarSign, shopping: ShoppingBag, trending: TrendingUp, } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultStats: StatCardConfig[] = [ { id: "stat-1", title: "Total Users", value: "12,456", icon: "users", details: [ { id: "detail-1-1", label: "Active", value: "10,234" }, { id: "detail-1-2", label: "Inactive", value: "2,222" }, { id: "detail-1-3", label: "New this week", value: "156" }, ], }, { id: "stat-2", title: "Revenue", value: "$84,320", icon: "dollar", details: [ { id: "detail-2-1", label: "This month", value: "$24,500" }, { id: "detail-2-2", label: "Last month", value: "$22,100" }, { id: "detail-2-3", label: "YTD", value: "$284,320" }, ], }, { id: "stat-3", title: "Orders", value: "1,847", icon: "shopping", details: [ { id: "detail-3-1", label: "Completed", value: "1,650" }, { id: "detail-3-2", label: "Pending", value: "145" }, { id: "detail-3-3", label: "Cancelled", value: "52" }, ], }, { id: "stat-4", title: "Growth", value: "+24.5%", icon: "trending", details: [ { id: "detail-4-1", label: "Weekly", value: "+5.2%" }, { id: "detail-4-2", label: "Monthly", value: "+24.5%" }, { id: "detail-4-3", label: "Yearly", value: "+156%" }, ], }, ] // ============================================================================ // COMPONENT // ============================================================================ function StatsCards05({ stats = defaultStats, className, idBase = "stats-cards-05", }: StatsCards05Props) { const [expandedId, setExpandedId] = React.useState(null) const toggleExpand = (id: string) => { setExpandedId(expandedId === id ? null : id) } return (

{stats.map((stat) => { const Icon = iconMap[stat.icon] const isExpanded = expandedId === stat.id return (

{stat.value}

{stat.title}

{isExpanded && (

{stat.details.map((detail) => (

{detail.label} {detail.value}

))}

)} ) })}

) } export default StatsCards05 export { StatsCards05, type StatsCards05Props }