"use client"; import type { HTMLAttributes, ReactNode } from "react"; import { useEffect, useState } from "react"; export type MarqueeLogo = { name: string; mark: ReactNode; href?: string }; export type PausableLogoMarqueeProps = HTMLAttributes & { logos: MarqueeLogo[]; /** Seconds for one full loop. */ duration?: number; paused?: boolean; defaultPaused?: boolean; onPausedChange?: (paused: boolean) => void; /** Accessible name of the region. */ label?: string; /** Renders a static, wrapped row regardless of the visitor's motion preference. */ reducedMotion?: boolean; }; const marqueeKeyframes = "@keyframes foundry-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}"; const fadeEdges = "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)"; export function PausableLogoMarquee({ logos, duration = 36, paused, defaultPaused = false, onPausedChange, label = "Customer logos", reducedMotion = false, className = "", ...props }: PausableLogoMarqueeProps) { const [internalPaused, setInternalPaused] = useState(defaultPaused); const [prefersReduced, setPrefersReduced] = useState(false); const isPaused = paused !== undefined ? paused : internalPaused; useEffect(() => { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); const sync = () => setPrefersReduced(query.matches); sync(); query.addEventListener("change", sync); return () => query.removeEventListener("change", sync); }, []); const animated = !reducedMotion && !prefersReduced; function toggle() { const next = !isPaused; if (paused === undefined) setInternalPaused(next); onPausedChange?.(next); } const itemTone = "flex h-8 shrink-0 items-center text-[#3B4654] [&_.contents>svg]:h-full [&_.contents>svg]:w-auto dark:text-[#C4CDD7]"; return (

{animated ? : null}

{logo.href ? ( {logo.name} ) : ( <> {logo.name} )}

{animated ? ( ) : null}

); }