Hexagon Grid

1'use client';
2 
3import * as React from 'react';
4import { cn } from '@/lib/utils';
5import './hexagon-grid.css';
6 
7export interface HexGridProps extends React.HTMLAttributes<HTMLDivElement> {
8  size?: number; // Size in pixels
9  gap?: number; // Gap in pixels
10}
11 
12export const HexGrid = React.forwardRef<HTMLDivElement, HexGridProps>(
13  ({ className, size = 220, gap = 16, children, ...props }, ref) => {
14    return (
15      <div className={cn('hex-grid-container', className)} ref={ref} {...props}>
16        <div
17          className='hex-grid'
18          style={
19            {
20              '--hex-width': `${size}px`,
21              '--hex-gap': `${gap}px`,
22              '--sqrt3': '1.73205',
23              '--hex-height': `calc(var(--hex-width) * 2 / var(--sqrt3))`,
24              '--hex-margin-x': `calc(var(--hex-gap) / 2)`,
25              '--hex-margin-y': `calc((var(--sqrt3) / 4 * var(--hex-gap)) - (0.125 * var(--hex-height)))`,
26            } as React.CSSProperties
27          }
28        >
29          {children}
30        </div>
31      </div>
32    );
33  }
34);
35HexGrid.displayName = 'HexGrid';
36 
37export interface HexagonProps extends Omit<
38  React.HTMLAttributes<HTMLDivElement>,
39  'title'
40> {
41  imageSrc: string;
42  imageAlt?: string;
43  title?: React.ReactNode;
44  subtitle?: React.ReactNode;
45}
46 
47export const Hexagon = React.forwardRef<HTMLDivElement, HexagonProps>(
48  (
49    {
50      className,
51      imageSrc,
52      imageAlt = 'Hexagon image',
53      title,
54      subtitle,
55      ...props
56    },
57    ref
58  ) => {
59    return (
60      <div
61        ref={ref}
62        className={cn('hex', className)}
63        tabIndex={0}
64        role='button'
65        {...props}
66      >
67        <div className='hex-shape'>
68          {/* eslint-disable-next-line @next/next/no-img-element */}
69          <img src={imageSrc} alt={imageAlt} />
70          {(title || subtitle) && (
71            <div className='hex-caption'>
72              {title && <h3>{title}</h3>}
73              {subtitle && <p>{subtitle}</p>}
74            </div>
75          )}
76        </div>
77      </div>
78    );
79  }
80);
81Hexagon.displayName = 'Hexagon';