// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Logo 03 * @description A logo grid displayed in bordered cards with logos filling the space. * Clean, organized display for partner showcases with prominent presentation. * * @slots logo, logo-container, logo-header, logo-heading, logo-description, * logo-grid, logo-card, logo-image * @variant cards * * @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 Logo03Props { /** 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" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Logo03({ heading = "Our Partners", description = "We work with the best companies in the industry.", logos = defaultLogos, className, }: Logo03Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Logo Grid */}

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

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

{LogoImage}

) })}

) } export default Logo03 export { Logo03, type Logo03Props, type LogoItem }