Honeycomb Background

"use client";
 
import React, { ReactNode, useId } from "react";
import { cn } from "@/lib/utils";
 
interface HoneyCombPatternProps {
  hexSize?: number;
  x?: number;
  y?: number;
  className?: string;
  props?: React.SVGProps<SVGSVGElement>;
}
 
/**
 * Renders a honeycomb background pattern using SVG.
 *
 * @param {number} hexSize - The size of each hexagon in the pattern.
 * @param {number} x - The x-coordinate of the pattern.
 * @param {number} y - The y-coordinate of the pattern.
 * @param {string} className - Additional CSS class names for the component.
 * @param {React.SVGProps<SVGSVGElement>} props - Additional props to pass to the SVG element.
 */
const HoneycombBackground: React.FC<HoneyCombPatternProps> = ({
  hexSize = 60,
  x = 0,
  y = hexSize / 2,
  className,
  ...props
}) => {
  const id = useId();
 
  const hexWidth = Math.sqrt(3) * hexSize;
  const hexHeight = 2 * hexSize;
  const hexHalfHeight = hexSize;
 
  const hexPath = `
    M ${hexWidth / 2} 0
    L ${hexWidth} ${hexHalfHeight / 2}
    L ${hexWidth} ${(3 * hexHalfHeight) / 2}
    L ${hexWidth / 2} ${hexHeight}
    L 0 ${(3 * hexHalfHeight) / 2}
    L 0 ${hexHalfHeight / 2}
    Z
  `;
 
  const patternWidth = hexWidth * 2;
  const patternHeight = hexHeight * 1.5;
 
  return (
    <svg
      aria-hidden="true"
      className={cn(
        "pointer-events-none absolute inset-0 h-full w-full fill-none stroke-neutral-200/80 dark:stroke-neutral-700",
        className
      )}
      {...props}
    >
      <defs>
        <pattern
          id={id}
          width={patternWidth}
          height={patternHeight}
          patternUnits="userSpaceOnUse"
          x={x}
          y={y}
        >
          <path d={hexPath} />
          <path d={hexPath} transform={`translate(${hexWidth}, 0)`} />
          <path
            d={hexPath}
            transform={`translate(${hexWidth / 2}, ${hexHeight / 1.33})`}
          />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#${id})`} />
    </svg>
  );
};
 
interface HoneycombWrapperProps {
  children: ReactNode;
  hexSize?: number;
  x?: number;
  y?: number;
  className?: string;
  backgroundColor?: string;
}
 
/**
 * A component that wraps its children with a honeycomb background.
 *
 * @param {ReactNode} props.children - The content to be displayed over the honeycomb background.
 * @param {number} [props.hexSize=60] - The size of each hexagon in the pattern.
 * @param {number} [props.x=0] - The x-coordinate of the pattern.
 * @param {number} [props.y=30] - The y-coordinate of the pattern.
 * @param {string} [props.className] - Additional CSS class names for the component.
 * @param {string} [props.backgroundColor="inherit"] - The background color class for the component container.
 */
const HoneycombWrapper: React.FC<HoneycombWrapperProps> = ({
  children,
  hexSize = 60,
  x = 0,
  y = hexSize / 2,
  className,
  backgroundColor = "inherit",
}) => {
  return (
    <div className={`relative  ${backgroundColor}`}>
      <HoneycombBackground
        hexSize={hexSize}
        x={x}
        y={y}
        className={className}
      />
      <div className="relative">{children}</div>
    </div>
  );
};
 
export { HoneycombBackground, HoneycombWrapper };