docs/components/GridPattern.tsx

import { type ComponentPropsWithoutRef, useId } from "react";

export function GridPattern({
    width,
    height,
    x,
    y,
    squares,
    ...props
}: ComponentPropsWithoutRef<"svg"> & {
    width: number;
    height: number;
    x: string | number;
    y: string | number;
    squares: [x: number, y: number][];
}) {
    const patternId = useId();

    return (
        <svg aria-hidden="true" {...props}>
            <defs>
                <pattern
                    id={patternId}
                    width={width}
                    height={height}
                    patternUnits="userSpaceOnUse"
                    x={x}
                    y={y}
                >
                    <path d={`M.5 ${height}V.5H${width}`} fill="none" />
                </pattern>
            </defs>
            <rect
                width="100%"
                height="100%"
                strokeWidth={0}
                fill={`url(#${patternId})`}
            />
            {squares && (
                // biome-ignore lint/a11y/noSvgWithoutTitle: it's decoration
                <svg
                    x={x}
                    y={y}
                    className="overflow-visible"
                    aria-label="Grid of squares"
                >
                    {squares.map(([x, y]) => (
                        <rect
                            strokeWidth="0"
                            key={`${x}-${y}`}
                            width={width + 1}
                            height={height + 1}
                            x={x * width}
                            y={y * height}
                        />
                    ))}
                </svg>
            )}
        </svg>
    );
}