"use client"; import { useEffect, useId, useRef, useState } from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; interface AnimatedGridPatternProps { width?: number; height?: number; x?: number; y?: number; strokeDasharray?: any; numSquares?: number; className?: string; maxOpacity?: number; duration?: number; repeatDelay?: number; } export function AnimatedGridPattern({ width = 40, height = 40, x = -1, y = -1, strokeDasharray = 0, numSquares = 50, className, maxOpacity = 0.5, duration = 4, repeatDelay = 0.5, ...props }: AnimatedGridPatternProps) { const id = useId(); const containerRef = useRef(null); const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); const [squares, setSquares] = useState(() => generateSquares(numSquares)); function getPos() { return [ Math.floor((Math.random() * dimensions.width) / width), Math.floor((Math.random() * dimensions.height) / height), ]; } // Adjust the generateSquares function to return objects with an id, x, and y function generateSquares(count: number) { return Array.from({ length: count }, (_, i) => ({ id: i, pos: getPos(), })); } // Function to update a single square's position const updateSquarePosition = (id: number) => { setSquares((currentSquares) => currentSquares.map((sq) => sq.id === id ? { ...sq, pos: getPos(), } : sq, ), ); }; // Update squares to animate in useEffect(() => { if (dimensions.width && dimensions.height) { setSquares(generateSquares(numSquares)); } }, [dimensions, numSquares]); // Resize observer to update container dimensions useEffect(() => { const resizeObserver = new ResizeObserver((entries) => { for (let entry of entries) { setDimensions({ width: entry.contentRect.width, height: entry.contentRect.height, }); } }); if (containerRef.current) { resizeObserver.observe(containerRef.current); } return () => { if (containerRef.current) { resizeObserver.unobserve(containerRef.current); } }; }, [containerRef]); return ( ); }