Interactive Grid Pattern

1"use client"
2 
3import React, { useState } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7/**
8 * InteractiveGridPattern is a component that renders a grid pattern with interactive squares.
9 *
10 * @param width - The width of each square.
11 * @param height - The height of each square.
12 * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares.
13 * @param className - The class name of the grid.
14 * @param squaresClassName - The class name of the squares.
15 */
16interface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {
17  width?: number
18  height?: number
19  squares?: [number, number] // [horizontal, vertical]
20  className?: string
21  squaresClassName?: string
22}
23 
24/**
25 * The InteractiveGridPattern component.
26 *
27 * @see InteractiveGridPatternProps for the props interface.
28 * @returns A React component.
29 */
30export function InteractiveGridPattern({
31  width = 40,
32  height = 40,
33  squares = [24, 24],
34  className,
35  squaresClassName,
36  ...props
37}: InteractiveGridPatternProps) {
38  const [horizontal, vertical] = squares
39  const [hoveredSquare, setHoveredSquare] = useState<number | null>(null)
40 
41  return (
42    <svg
43      width={width * horizontal}
44      height={height * vertical}
45      className={cn(
46        "absolute inset-0 h-full w-full border border-gray-400/30",
47        className
48      )}
49      {...props}
50    >
51      {Array.from({ length: horizontal * vertical }).map((_, index) => {
52        const x = (index % horizontal) * width
53        const y = Math.floor(index / horizontal) * height
54        return (
55          <rect
56            key={index}
57            x={x}
58            y={y}
59            width={width}
60            height={height}
61            className={cn(
62              "stroke-gray-400/30 transition-all duration-100 ease-in-out not-[&:hover]:duration-1000",
63              hoveredSquare === index ? "fill-gray-300/30" : "fill-transparent",
64              squaresClassName
65            )}
66            onMouseEnter={() => setHoveredSquare(index)}
67            onMouseLeave={() => setHoveredSquare(null)}
68          />
69        )
70      })}
71    </svg>
72  )
73}