// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats 01 * @description A statistics section displaying key metrics in a centered grid. * Great for showcasing company achievements and social proof. * * @slots stats, stats-container, stats-header, stats-heading, stats-description, * stats-grid, stats-item, stats-value, stats-label, stats-item-description * @variant centered * * @registryDependencies * @dependencies */ import * as React from "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 } interface Stats01Props { /** 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: "Downloads", description: "Trusted by developers worldwide", }, { id: "stat-2", value: "99.9%", label: "Uptime", description: "Enterprise-grade reliability", }, { id: "stat-3", value: "500+", label: "Components", description: "Production-ready blocks", }, { id: "stat-4", value: "24/7", label: "Support", description: "Help when you need it", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Stats01({ heading = "Trusted by teams worldwide", description = "Our platform powers some of the best products on the web.", stats = defaultStats, className, }: Stats01Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Stats Grid */}

{stats.map((stat) => (

{stat.value}

{stat.label}

{stat.description && (

{stat.description}

)}

))}

) } export default Stats01 export { Stats01, type Stats01Props, type StatItem }