Bordered Clients Grid

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/* ═══════════════════════════════════════════════════════════
7   Bordered Clients Grid — A 5-column wordmark grid with subtle
8   dividers, hover-tinted cells, and decorative cross markers
9   at the four outer corners.
10 
11   Wordmarks render as typography (not images) — each brand has
12   distinct font weight, letter-spacing, case, and style to
13   capture its character. No external CDN dependency, fully
14   theme-aware via `currentColor`.
15 
16   Override the `logos` prop with your own entries — either
17   styled text (matching the default API) or full ReactNodes
18   for SVG wordmarks if you want pixel-perfect brand typography.
19 
20   Grid collapses 5 → 4 → 3 columns at lg → md → sm breakpoints.
21   ═══════════════════════════════════════════════════════════ */
22 
23export interface ClientLogo {
24  /** Display name; used as alt/key. */
25  name: string;
26  /** Override the rendered text (e.g., "tailwindcss" for Tailwind CSS). Defaults to `name`. */
27  label?: string;
28  /** Custom font family. Falls back to inherited sans. */
29  fontFamily?: string;
30  /** Font weight (100–900). Defaults to 600. */
31  fontWeight?: number;
32  /** Font size in pixels. Defaults to 18. */
33  fontSize?: number;
34  /** CSS letter-spacing (e.g., "-0.04em" or "0.06em"). */
35  letterSpacing?: string;
36  /** Italic typography. */
37  italic?: boolean;
38  /** Uppercase transform. */
39  uppercase?: boolean;
40  /** Optional anchor href. */
41  href?: string;
42  /** Escape hatch — render a custom node (e.g., an SVG) instead of styled text. */
43  node?: React.ReactNode;
44}
45 
46export interface BorderedClientsGridProps {
47  logos?: ClientLogo[];
48  className?: string;
49}
50 
51const DEFAULT_LOGOS: ClientLogo[] = [
52  {
53    name: "NVIDIA",
54    fontWeight: 900,
55    fontSize: 18,
56    letterSpacing: "0.06em",
57    uppercase: true,
58  },
59  {
60    name: "OpenAI",
61    fontWeight: 600,
62    fontSize: 22,
63    letterSpacing: "-0.01em",
64    fontFamily:
65      '"Times New Roman", ui-serif, Georgia, "Liberation Serif", serif',
66  },
67  {
68    name: "GitHub",
69    fontWeight: 700,
70    fontSize: 24,
71    letterSpacing: "-0.025em",
72  },
73  {
74    name: "Tailwind CSS",
75    label: "tailwindcss",
76    fontWeight: 600,
77    fontSize: 22,
78// … truncated