// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Logo 02 * @description An infinite scrolling logo marquee with smooth CSS animation. * Great for showcasing many partners in limited space with visual motion. * * @slots logo, logo-container, logo-heading, logo-marquee, logo-track, logo-item, logo-image * @variant marquee * * @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 } interface Logo02Props { /** Section heading */ heading?: string /** Array of logos to display */ logos?: LogoItem[] /** Animation duration in seconds */ duration?: number /** 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" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Logo02({ heading = "Trusted by industry leaders", logos = defaultLogos, duration = 20, className, }: Logo02Props) { return (

{/* Heading */} {heading && (

{heading}

)} {/* Marquee Container - Full width */}

{/* Gradient Masks */}

{/* CSS Animation */}

) } export default Logo02 export { Logo02, type Logo02Props, type LogoItem }