feat: ✨ Initialize rewrite

components/GridPattern.tsx

@@ -0,0 +1,61 @@
+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: <explanation>
+                <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>
+    );
+}