Grid Pattern

1import { useId } from "react"
2 
3import { cn } from "@/lib/utils"
4 
5interface GridPatternProps extends React.SVGProps<SVGSVGElement> {
6  width?: number
7  height?: number
8  x?: number
9  y?: number
10  squares?: Array<[x: number, y: number]>
11  strokeDasharray?: string
12  className?: string
13  [key: string]: unknown
14}
15 
16export function GridPattern({
17  width = 40,
18  height = 40,
19  x = -1,
20  y = -1,
21  strokeDasharray = "0",
22  squares,
23  className,
24  ...props
25}: GridPatternProps) {
26  const id = useId()
27 
28  return (
29    <svg
30      aria-hidden="true"
31      className={cn(
32        "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
33        className
34      )}
35      {...props}
36    >
37      <defs>
38        <pattern
39          id={id}
40          width={width}
41          height={height}
42          patternUnits="userSpaceOnUse"
43          x={x}
44          y={y}
45        >
46          <path
47            d={`M.5 ${height}V.5H${width}`}
48            fill="none"
49            strokeDasharray={strokeDasharray}
50          />
51        </pattern>
52      </defs>
53      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
54      {squares && (
55        <svg x={x} y={y} className="overflow-visible">
56          {squares.map(([x, y]) => (
57            <rect
58              strokeWidth="0"
59              key={`${x}-${y}`}
60              width={width - 1}
61              height={height - 1}
62              x={x * width + 1}
63              y={y * height + 1}
64            />
65          ))}
66        </svg>
67      )}
68    </svg>
69  )
70}