// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Logo 01 * @description A split layout logo cloud with text content on the left and * a grid of company logos on the right. Great for showcasing partnerships. * * @slots logo, logo-container, logo-content, logo-heading, logo-description, * logo-grid, logo-item, logo-image * @variant split * * @registryDependencies * @dependencies */ import * as React from "react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface LogoItem { /** Unique identifier */ id: string /** Company name (used for alt text) */ name: string /** Logo image URL */ src: string /** Optional link destination */ href?: string } interface Logo01Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of logos to display */ logos?: LogoItem[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultLogos: LogoItem[] = [ { id: "company-1", name: "Company 1", src: "/assets/placeholders/logo-horizontal.svg" }, { id: "company-2", name: "Company 2", src: "/assets/placeholders/logo-horizontal.svg" }, { id: "company-3", name: "Company 3", src: "/assets/placeholders/logo-horizontal.svg" }, { id: "company-4", name: "Company 4", src: "/assets/placeholders/logo-horizontal.svg" }, { id: "company-5", name: "Company 5", src: "/assets/placeholders/logo-horizontal.svg" }, { id: "company-6", name: "Company 6", src: "/assets/placeholders/logo-horizontal.svg" }, { id: "company-7", name: "Company 7", src: "/assets/placeholders/logo-horizontal.svg" }, { id: "company-8", name: "Company 8", src: "/assets/placeholders/logo-horizontal.svg" }, { id: "company-9", name: "Company 9", src: "/assets/placeholders/logo-horizontal.svg" }, { id: "company-10", name: "Company 10", src: "/assets/placeholders/logo-horizontal.svg" }, { id: "company-11", name: "Company 11", src: "/assets/placeholders/logo-horizontal.svg" }, { id: "company-12", name: "Company 12", src: "/assets/placeholders/logo-horizontal.svg" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Logo01({ heading = "Trusted by industry leaders", description = "Join thousands of companies already using our platform to power their business.", logos = defaultLogos, className, }: Logo01Props) { return (

{/* Left: Text Content */}

{heading}

{description && (

{description}

)}

{/* Right: Logo Grid */}

{logos.map((logo) => { const LogoImage = (

) return logo.href ? ( {LogoImage} ) : (

{LogoImage}

) })}

) } export default Logo01 export { Logo01, type Logo01Props, type LogoItem }