feat(block-art): refactor BlockArt component to support customizable grid dimensions and animation properties

Author: nabilfatih

components/shared/footer-content.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils";
 import type { ReactNode } from "react";
-import BlockArt from "../ui/block-art";
+import { BlockArt } from "../ui/block-art";
 import { Particles } from "../ui/particles";
 
 type Props = {

components/ui/block-art.tsx

@@ -1,23 +1,86 @@
+"use client";
+
 import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
 
 type Props = {
-  length?: number;
+  gridCols?: number;
+  gridRows?: number;
   className?: string;
+  animationColor?: string;
+  animatedCellCount?: number;
+  animationInterval?: number;
 };
 
-export default function BlockArt({ length = 20, className }: Props) {
+const DEFAULT_ANIMATION_COLOR = "bg-secondary";
+const DEFAULT_ANIMATED_CELL_COUNT = 15;
+const DEFAULT_ANIMATION_INTERVAL = 1000; // ms
+
+export function BlockArt({
+  gridCols = 16,
+  gridRows = 8,
+  className,
+  animationColor = DEFAULT_ANIMATION_COLOR,
+  animatedCellCount = DEFAULT_ANIMATED_CELL_COUNT,
+  animationInterval = DEFAULT_ANIMATION_INTERVAL,
+}: Props) {
+  const COLS = Math.max(1, Math.floor(gridCols));
+  const ROWS = Math.max(1, Math.floor(gridRows));
+  const totalCells = COLS * ROWS;
+
+  const [activeIndices, setActiveIndices] = useState<Set<number>>(new Set());
+
+  useEffect(() => {
+    if (totalCells === 0 || animatedCellCount === 0) {
+      setActiveIndices(new Set());
+      return;
+    }
+
+    const effectiveAnimatedCellCount = Math.min(animatedCellCount, totalCells);
+
+    const intervalId = setInterval(() => {
+      const newActiveIndices = new Set<number>();
+      const availableIndices = Array.from({ length: totalCells }, (_, i) => i);
+
+      for (let i = availableIndices.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [availableIndices[i], availableIndices[j]] = [
+          availableIndices[j],
+          availableIndices[i],
+        ];
+      }
+
+      for (let i = 0; i < effectiveAnimatedCellCount; i++) {
+        newActiveIndices.add(availableIndices[i]);
+      }
+      setActiveIndices(newActiveIndices);
+    }, animationInterval);
+
+    return () => clearInterval(intervalId);
+  }, [totalCells, animatedCellCount, animationInterval]);
+
   return (
-    <section className={cn("bg-foreground pb-30", className)}>
-      {Array.from({ length }).map((_, i) => (
-        <div
-          key={i}
-          className="bg-background"
-          style={{
-            marginTop: `${0 + i}px`,
-            height: `${20 - i}px`,
-          }}
-        />
-      ))}
+    <section className={cn("h-full w-full bg-border py-px", className)}>
+      <div
+        className="h-full w-full"
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${COLS}, minmax(0, 1fr))`,
+          gridTemplateRows: `repeat(${ROWS}, auto)`,
+          gap: "1px",
+        }}
+      >
+        {Array.from({ length: totalCells }).map((_, i) => (
+          <div
+            key={i}
+            className={cn(
+              "transition-colors duration-300 ease-in-out hover:bg-primary",
+              activeIndices.has(i) ? animationColor : "bg-background"
+            )}
+            style={{ aspectRatio: "1 / 1" }}
+          />
+        ))}
+      </div>
     </section>
   );
 }