"use client";
import type { CSSProperties, ReactNode } from "react";
/*
* Integration Grid – a card illustration, in a single self-contained file.
* A honeycomb-like wall of rounded logo tiles in three rows (7 · 9 · 7). The middle row reaches one
* tile further on each side; its centre tile is larger, pure white and holds your product mark.
* The other tiles are frosted and fade out toward the edges, while the logos stay at full color.
* The artwork is laid out on a 1520 × 560 grid (with 9 columns) and scales with its container.
*/
export type IntegrationGridLogo = {
/** Name for the accessible description */
name: string;
/** A single SVG path on a 24 × 24 viewBox (e.g. from simple-icons) */
path: string;
/** Fill color – leave it out for black marks that should follow the ink color (and turn light in dark mode) */
color?: string;
/** Optional fill color in dark mode, for brand colors that are too dark on a dark tile */
darkColor?: string;
};
export type IntegrationGridProps = {
/** Up to 22 logos, filled row by row around the centre tile – defaults to a set of well-known tools */
logos?: IntegrationGridLogo[];
/** Content of the centre tile – defaults to a neutral product mark */
mark?: ReactNode;
/** Tiles in the middle row – 9 by default; the rows above and below get two fewer. Use 7 or 5 for a tighter grid */
columns?: 5 | 7 | 9;
className?: string;
/** Accessible description of the scene */
label?: string;
};
/* Layout (in grid units): tile 140, gap 20, centre tile 168 – 80 units of air around the outer tiles */
const STEP = 160;
const MID_Y = 280;
type Slot = { x: number; y: number; center: boolean; d: number };
/** Width of the layout for a number of columns: 9 columns → 1520 units */
const widthFor = (columns: number) => columns * STEP + 80;
function slotsFor(columns: number): Slot[] {
const midX = widthFor(columns) / 2;
return [columns - 2, columns, columns - 2].flatMap((count, row) =>
Array.from({ length: count }, (_, i) => {
const x = midX + (i - (count - 1) / 2) * STEP;
const y = MID_Y + (row - 1) * STEP;
const d = Math.hypot((x - midX) / STEP, (y - MID_Y) / STEP);
return { x, y, center: row === 1 && i === (count - 1) / 2, d };
}),
);
}
export function IntegrationGrid({ logos = DEFAULT_LOGOS, mark, columns = 9, className, label }: IntegrationGridProps) {
const list = logos.length ? logos : DEFAULT_LOGOS;
const SLOTS = slotsFor(columns);
const outer = SLOTS.filter((s) => !s.center).length;
const shown = list.slice(0, outer);
let n = 0;
return (
l.name).join(", ")}`}
>
{/* React 19 hoists this into once, no matter how many instances render */}
{SLOTS.map((s, i) => {
if (s.center) {
return (
{mark ?? }
);
}
// Logos repeat if fewer than 22 are passed
const logo = list[n++ % list.length];
// Fill fades from ~55% next to the centre to ~25% at the far edges; border and shadow follow
const fill = Math.max(0.22, 0.64 - 0.095 * s.d);
const k = Math.max(0.35, 1 - 0.16 * s.d);
return (
);
})}