1import { useId } from 'react'
 2
 3export function GridPattern({ width, height, x, y, squares, ...props }) {
 4  let patternId = useId()
 5
 6  return (
 7    <svg aria-hidden="true" {...props}>
 8      <defs>
 9        <pattern
10          id={patternId}
11          width={width}
12          height={height}
13          patternUnits="userSpaceOnUse"
14          x={x}
15          y={y}
16        >
17          <path d={`M.5 ${height}V.5H${width}`} fill="none" />
18        </pattern>
19      </defs>
20      <rect
21        width="100%"
22        height="100%"
23        strokeWidth={0}
24        fill={`url(#${patternId})`}
25      />
26      {squares && (
27        <svg x={x} y={y} className="overflow-visible">
28          {squares.map(([x, y]) => (
29            <rect
30              strokeWidth="0"
31              key={`${x}-${y}`}
32              width={width + 1}
33              height={height + 1}
34              x={x * width}
35              y={y * height}
36            />
37          ))}
38        </svg>
39      )}
40    </svg>
41  )
42}