// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Logo 04 * @description Logo cloud with trust statistics displayed above. * Combines company logos with key metrics like customer count and uptime. * * @slots logos, logos-container, logos-content, logos-header, * logos-heading, logos-description, logos-stats, logos-stat, * logos-stat-value, logos-stat-label, logos-grid, logos-item, * logos-image * @variant stats * * @registryDependencies * @dependencies */ import * as React from "react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface LogoItemConfig { /** Unique identifier for list key */ id: string /** Company name */ name: string /** Logo image source */ src: string } interface StatItemConfig { /** Unique identifier for list key */ id: string /** Stat value (e.g., "10K+", "99.9%") */ value: string /** Stat label */ label: string } interface Logo04Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Trust statistics */ stats?: StatItemConfig[] /** Company logos */ logos?: LogoItemConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_STATS: StatItemConfig[] = [ { id: "stat-customers", value: "10K+", label: "Customers" }, { id: "stat-uptime", value: "99.9%", label: "Uptime" }, { id: "stat-processed", value: "$2B+", label: "Processed" }, ] const DEFAULT_LOGOS: LogoItemConfig[] = [ { id: "logo-1", name: "Company 1", src: "/assets/placeholders/logo-placeholder.svg" }, { id: "logo-2", name: "Company 2", src: "/assets/placeholders/logo-placeholder.svg" }, { id: "logo-3", name: "Company 3", src: "/assets/placeholders/logo-placeholder.svg" }, { id: "logo-4", name: "Company 4", src: "/assets/placeholders/logo-placeholder.svg" }, { id: "logo-5", name: "Company 5", src: "/assets/placeholders/logo-placeholder.svg" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Logo04({ heading = "Trusted by the best", description = "Join thousands of companies that trust us with their business", stats = DEFAULT_STATS, logos = DEFAULT_LOGOS, className, idBase, }: Logo04Props) { const headingId = `${idBase ?? "logo-04"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Stats */}

{stats.map((stat) => (

{stat.value}

{stat.label}

))}

{/* Logo Grid */}

{logos.map((logo) => (

))}

) } export default Logo04 export { Logo04, type Logo04Props, type LogoItemConfig, type StatItemConfig }