// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats Cards 01 * @description A simple statistics grid showing key metrics with icons and change indicators. * Perfect for dashboards and overview sections. * * @slots stats, stats-container, stats-grid, stats-card, stats-header, * stats-title, stats-icon, stats-value, stats-change * @variant simple * * @registryDependencies card * @dependencies lucide-react */ import * as React from "react" import { Users, DollarSign, ShoppingCart, TrendingUp } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Card, CardContent, CardHeader, CardTitle } from "@/registry/ui/card" // ============================================================================ // TYPES // ============================================================================ interface StatCard { /** Unique identifier */ id: string /** Stat title */ title: string /** Stat value */ value: string /** Change percentage */ change?: string /** Change direction */ changeType?: "positive" | "negative" | "neutral" /** Icon component */ icon: React.ComponentType<{ className?: string "aria-hidden"?: boolean | "true" | "false" focusable?: "true" | "false" }> } interface StatsCards01Props { /** Statistics to display */ stats?: StatCard[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultStats: StatCard[] = [ { id: "stat-1", title: "Total Revenue", value: "$45,231", change: "+12.5%", changeType: "positive", icon: DollarSign }, { id: "stat-2", title: "Active Users", value: "2,350", change: "+18.2%", changeType: "positive", icon: Users }, { id: "stat-3", title: "Total Orders", value: "1,247", change: "-3.1%", changeType: "negative", icon: ShoppingCart }, { id: "stat-4", title: "Growth Rate", value: "24.5%", change: "+4.1%", changeType: "positive", icon: TrendingUp }, ] // ============================================================================ // COMPONENT // ============================================================================ function StatsCards01({ stats = defaultStats, className, }: StatsCards01Props) { return (

Key Statistics

{stats.map((stat) => ( {stat.title}

{stat.value}

{stat.change && (

{stat.change} from last period

)} ))}

) } export default StatsCards01 export { StatsCards01, type StatsCards01Props, type StatCard }