// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats 07 * @description A before/after comparison stats section showing transformation * or improvement metrics. Perfect for showcasing ROI and impact. * * @slots stats, stats-container, stats-header, stats-heading, stats-description, * stats-comparison, stats-column-label, stats-items, stats-item, * stats-column, stats-value, stats-arrow, stats-label * @variant comparison * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface ComparisonStatConfig { /** Unique identifier for list key */ id: string /** Metric label */ label: string /** Before value */ before: string /** After value */ after: string } interface Stats07Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Before column label */ beforeLabel?: string /** After column label */ afterLabel?: string /** Array of comparison stats */ stats?: ComparisonStatConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_STATS: ComparisonStatConfig[] = [ { id: "stat-dev-time", label: "Development Time", before: "6 months", after: "6 weeks", }, { id: "stat-coverage", label: "Code Coverage", before: "45%", after: "95%", }, { id: "stat-bugs", label: "Bug Reports", before: "120/mo", after: "8/mo", }, { id: "stat-velocity", label: "Team Velocity", before: "32 pts", after: "78 pts", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Stats07({ heading = "See the transformation", description = "Real results from teams that switched to our platform.", beforeLabel = "Before", afterLabel = "After", stats = DEFAULT_STATS, className, idBase, }: Stats07Props) { const headingId = `${idBase ?? "stats-07"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Comparison Grid */}

{/* Column Headers - Desktop */}

{beforeLabel}

{/* Stats Items */}

{stats.map((stat) => (

{/* Before */}

{beforeLabel}

{stat.before}

{/* Arrow */}

{/* After */}

{afterLabel}

{stat.after}

{/* Label - Full width at bottom */}

{stat.label}

))}

) } export default Stats07 export { Stats07, type Stats07Props, type ComparisonStatConfig }