Logo marquee

import * as React from "react";
import { cn } from "@/lib/utils";

export type MarqueeLogo = {
  /** Visible name. Rendered as a text wordmark unless `mark` is given. */
  name: string;
  /** Your own logo element, for example an inline svg. It replaces the text wordmark. */
  mark?: React.ReactNode;
  /** Makes the logo a link. */
  href?: string;
};

type LogoMarqueeProps = Omit<React.ComponentProps<"section">, "title"> & {
  /** The logos, in order. Four or more fill the track best. */
  logos: MarqueeLogo[];
  /** Small line above the track. */
  label?: string;
  /** Seconds for one full loop. Slower reads calmer. */
  duration?: number;
};

const css = `
.gt-marquee{--gap:3rem;-webkit-mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent);mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent)}
.gt-marquee-track{display:flex;width:max-content;animation:gt-marquee var(--gt-duration,40s) linear infinite}
.gt-marquee:hover .gt-marquee-track,.gt-marquee:focus-within .gt-marquee-track{animation-play-state:paused}
.gt-marquee-group{display:flex;flex-shrink:0;align-items:center;gap:var(--gap);padding-right:var(--gap)}
@keyframes gt-marquee{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
.gt-marquee{-webkit-mask-image:none;mask-image:none}
.gt-marquee-track{animation:none;width:auto;justify-content:center}
.gt-marquee-group{flex-wrap:wrap;justify-content:center;padding-right:0;row-gap:1.25rem}
.gt-marquee-group[aria-hidden=true]{display:none}
}
`;

function Logo({ logo }: { logo: MarqueeLogo }) {
  const body = logo.mark ?? <span className="text-lg font-medium tracking-tight whitespace-nowrap">{logo.name}</span>;
  const base = "inline-flex items-center text-muted-foreground transition-colors";
  if (logo.href) {
    return (
      <a href={logo.href} aria-label={logo.name} className={cn(base, "rounded-sm hover:text-foreground")}>
        {body}
      </a>
    );
  }
  return (
    <span className={base} role="img" aria-label={logo.name}>
      {body}
    </span>
  );
}

/**
 * A slow, endless row of logos. Pauses on hover and keyboard focus.
 * Under reduced motion it stops and wraps into a still, centered row.
 * Server component: the motion is CSS only, and the second copy of the list is hidden from assistive tech.
 */
export function LogoMarquee({ logos, label, duration = 40, className, style, ...props }: LogoMarqueeProps) {
  const group = (hidden: boolean) => (
    <ul
      className="gt-marquee-group m-0 list-none p-0"
      aria-hidden={hidden || undefined}
      {...(hidden ? { inert: true } : {})}
    >
      {logos.map((logo) => (
        <li key={logo.name} className="flex items-center">
          <Logo logo={logo} />
        </li>
      ))}
    </ul>
  );
  return (
    <section
      data-slot="logo-marquee"
      className={cn("flex flex-col items-center gap-5 py-6", className)}
      style={{ "--gt-duration": `${duration}s`, ...style } as React.CSSProperties}
      {...props}
    >
      <style href="gt-logo-marquee" precedence="default">
        {css}
      </style>
      {label && <p className="m-0 font-mono text-xs tracking-wide text-muted-foreground uppercase">{label}</p>}
      <div className="gt-marquee w-full overflow-hidden">
        <div className="gt-marquee-track">
          {group(false)}
          {group(true)}
        </div>
      </div>
    </section>
  );
}