import { cn } from "@/lib/utils"; import React, { useState } from "react"; /** * InteractiveGridPattern is a component that renders a grid pattern with interactive squares. * * @param width - The width of each square. * @param height - The height of each square. * @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. * @param className - The class name of the grid. * @param squaresClassName - The class name of the squares. */ interface InteractiveGridPatternProps extends React.SVGProps { width?: number; height?: number; squares?: [number, number]; // [horizontal, vertical] className?: string; squaresClassName?: string; } /** * The InteractiveGridPattern component. * * @see InteractiveGridPatternProps for the props interface. * @returns A React component. */ // changed this export function InteractiveGridPattern({ width = 40, height = 40, squares = [100, 100], className, squaresClassName, ...props }: InteractiveGridPatternProps) { const [horizontal, vertical] = squares; const [hoveredSquare, setHoveredSquare] = useState(null); return ( {Array.from({ length: horizontal * vertical }).map((_, index) => { const x = (index % horizontal) * width; const y = Math.floor(index / horizontal) * height; return ( setHoveredSquare(index)} onMouseLeave={() => setHoveredSquare(null)} /> ); })} ); }