// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats 02 * @description A card-based statistics section with icons and borders. * Great for dashboard-style stat displays. * * @slots stats, stats-container, stats-header, stats-heading, stats-description, * stats-grid, stats-item, stats-icon, stats-value, stats-label, * stats-item-description * @variant cards * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { Users, Download, Globe, Star } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface StatItem { /** Unique identifier */ id: string /** Stat value (e.g., "10M+", "99.9%") */ value: string /** Stat label */ label: string /** Optional description */ description?: string /** Icon component */ icon?: React.ComponentType<{ className?: string "aria-hidden"?: boolean | "true" | "false" focusable?: "true" | "false" }> } interface Stats02Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of stats to display */ stats?: StatItem[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultStats: StatItem[] = [ { id: "stat-1", value: "10M+", label: "Active Users", description: "Growing every day", icon: Users, }, { id: "stat-2", value: "50M+", label: "Downloads", description: "Across all platforms", icon: Download, }, { id: "stat-3", value: "190+", label: "Countries", description: "Global reach", icon: Globe, }, { id: "stat-4", value: "4.9", label: "Rating", description: "Average user rating", icon: Star, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Stats02({ heading = "Trusted globally", description = "Numbers that speak for themselves.", stats = defaultStats, className, }: Stats02Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Stats Grid */}

{stats.map((stat) => (

{stat.icon && (

)}

{stat.value}

{stat.label}

{stat.description && (

{stat.description}

)}

))}

) } export default Stats02 export { Stats02, type Stats02Props, type StatItem }