Logo cloud

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

export type Logo = {
  /** Company name, read by screen readers. */
  name: string;
  /** The mark: an inline SVG or styled text. Decorative, so it is hidden from assistive tech. */
  mark: React.ReactNode;
};

type LogoCloudProps = Omit<React.ComponentProps<"section">, "title"> & {
  /** Small line above the grid. */
  title?: string;
  logos: Logo[];
  /** Columns from the sm breakpoint up. Two on a phone. */
  columns?: 3 | 4 | 5;
};

const cols = {
  3: "sm:grid-cols-3",
  4: "sm:grid-cols-4",
  5: "sm:grid-cols-5",
};

/**
 * A static grid of customer marks separated by hairlines. Marks are muted and
 * rise to full ink on hover. Server component.
 */
export function LogoCloud({ title, logos, columns = 4, className, ...props }: LogoCloudProps) {
  return (
    <section data-slot="logo-cloud" className={cn("w-full px-6 py-10 md:px-8", className)} {...props}>
      <div className="mx-auto flex max-w-6xl flex-col gap-6">
        {title && (
          <p className="m-0 text-center font-mono text-xs tracking-wide text-muted-foreground uppercase">{title}</p>
        )}
        <ul
          className={cn(
            "m-0 grid list-none grid-cols-2 gap-px overflow-hidden rounded-lg border bg-border p-0",
            cols[columns],
          )}
        >
          {logos.map((logo) => (
            <li
              key={logo.name}
              className="grid h-20 place-items-center bg-background px-4 text-muted-foreground transition-colors duration-150 ease-out hover:text-foreground"
            >
              <span className="sr-only">{logo.name}</span>
              <span aria-hidden className="flex items-center gap-2">
                {logo.mark}
              </span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}