Background Blocks

1
import { cn } from '@/lib/utils';
2
import React, { useEffect, useState } from 'react';
3

4
function Blocks({
5
  activeDivs,
6
  divClass,
7
  classname,
8
  activeDivsClass,
9
  containerRef,
10
}: {
11
  activeDivsClass?: string;
12
  activeDivs?: any;
13
  divClass?: string;
14
  classname?: string;
15
  containerRef: React.RefObject<HTMLDivElement>;
16
}) {
17
  const [blocks, setBlocks] = useState<JSX.Element[]>([]);
18

19
  useEffect(() => {
20
    const updateBlocks = () => {
21
      const container = containerRef.current;
22
      if (container) {
23
        const containerWidth = container.clientWidth;
24
        const containerHeight = container.clientHeight;
25
        const blockSize = containerWidth * 0.06; // Using 6% of section width for the block size
26

27
        const columns = Math.floor(containerWidth / blockSize);
28
        const rows = Math.floor(containerHeight / blockSize);
29

30
        const newBlocks = Array.from({ length: columns }, (_, columnIndex) => (
31
          <div key={columnIndex} className='w-[6vw] h-full'>
32
            {Array.from({ length: rows }, (_, rowIndex) => (
33
              <div
34
                key={rowIndex}
35
                className={cn(
36
                  `h-[6vh] w-full border-[1px] border-[#5dcece09] ${
37
                    // @ts-ignore
38
                    activeDivs[columnIndex]?.has(rowIndex)
39
                      ? `${activeDivsClass}`
40
                      : ''
41
                  }`,
42
                  divClass
43
                )}
44
                style={{ height: `${blockSize}px` }}
45
              ></div>
46
            ))}
47
          </div>
48
        ));
49

50
        setBlocks(newBlocks);
51
      }
52
    };
53

54
    updateBlocks();
55
    window.addEventListener('resize', updateBlocks);
56

57
    return () => window.removeEventListener('resize', updateBlocks);
58
  }, [activeDivs, activeDivsClass, divClass, containerRef]);
59

60
  return (
61
    <div
62
      className={cn(
63
        'flex h-full overflow-hidden top-0 -inset-0 left-0 absolute',
64
        classname
65
      )}
66
    >
67
      {blocks}
68
    </div>
69
  );
70
}
71

72
export default Blocks;