Hexagon Background

1'use client';
2 
3import * as React from 'react';
4 
5import { cn } from '@/lib/utils';
6 
7type HexagonBackgroundProps = React.ComponentProps<'div'> & {
8  hexagonProps?: React.ComponentProps<'div'>;
9  hexagonSize?: number; // value greater than 50
10  hexagonMargin?: number;
11};
12 
13function HexagonBackground({
14  className,
15  children,
16  hexagonProps,
17  hexagonSize = 75,
18  hexagonMargin = 3,
19  ...props
20}: HexagonBackgroundProps) {
21  const hexagonWidth = hexagonSize;
22  const hexagonHeight = hexagonSize * 1.1;
23  const rowSpacing = hexagonSize * 0.8;
24  const baseMarginTop = -36 - 0.275 * (hexagonSize - 100);
25  const computedMarginTop = baseMarginTop + hexagonMargin;
26  const oddRowMarginLeft = -(hexagonSize / 2);
27  const evenRowMarginLeft = hexagonMargin / 2;
28 
29  const [gridDimensions, setGridDimensions] = React.useState({
30    rows: 0,
31    columns: 0,
32  });
33 
34  const updateGridDimensions = React.useCallback(() => {
35    const rows = Math.ceil(window.innerHeight / rowSpacing);
36    const columns = Math.ceil(window.innerWidth / hexagonWidth) + 1;
37    setGridDimensions({ rows, columns });
38  }, [rowSpacing, hexagonWidth]);
39 
40  React.useEffect(() => {
41    updateGridDimensions();
42    window.addEventListener('resize', updateGridDimensions);
43    return () => window.removeEventListener('resize', updateGridDimensions);
44  }, [updateGridDimensions]);
45 
46  return (
47    <div
48      data-slot="hexagon-background"
49      className={cn(
50        'relative size-full overflow-hidden dark:bg-neutral-900 bg-neutral-100',
51        className,
52      )}
53      {...props}
54    >
55      <style>{`:root { --hexagon-margin: ${hexagonMargin}px; }`}</style>
56      <div className="absolute top-0 -left-0 size-full overflow-hidden">
57        {Array.from({ length: gridDimensions.rows }).map((_, rowIndex) => (
58          <div
59            key={`row-${rowIndex}`}
60            style={{
61              marginTop: computedMarginTop,
62              marginLeft:
63                ((rowIndex + 1) % 2 === 0
64                  ? evenRowMarginLeft
65                  : oddRowMarginLeft) - 10,
66            }}
67            className="inline-flex"
68          >
69            {Array.from({ length: gridDimensions.columns }).map(
70              (_, colIndex) => (
71                <div
72                  key={`hexagon-${rowIndex}-${colIndex}`}
73                  {...hexagonProps}
74                  style={{
75                    width: hexagonWidth,
76                    height: hexagonHeight,
77                    marginLeft: hexagonMargin,
78// … truncated