josefandersson / HexGrid

import { css } from "@linaria/core" import type { CSSProperties, ReactNode } from "react" import React from "react" /** width / heigt */ const hexAspectRatio = 4 / 3 * Math.sqrt(3) / 2 export function HexGrid({ gap, rows, cols, children }: { gap: number, rows: number, cols: number, children: ReactNode }) { return ( <div className={css`position: relative;`}> <div style={{ "--hex-y-gap": `${gap}px`, "--hex-x-gap": `${gap * Math.sqrt(3) / 2}px`, /* Add .5 to account for staggered columns */ "--hex-rows": rows + .5, "--hex-cols": cols } as CSSProperties} className={css` /* available width divided by columns adjusted for overlap */ --hex-width: calc( (100% - ((var(--hex-cols) - 1) * var(--hex-x-gap))) / (var(--hex-cols) * 3 / 4 + 1 / 4) ); /* total y gaps plus total hex heights */ padding-bottom: calc( (var(--hex-rows) - 1) * var(--hex-y-gap) + var(--hex-rows) * var(--hex-width) / ${hexAspectRatio} ); `} > {children} </div> </div> ) } export function Hex({ children, row, col }: { children: ReactNode, row: number, col: number }) { const colStyle = css` /* available height minus total y gaps divided by rows */ --hex-height: calc( (100% - (var(--hex-rows) - 1) * var(--hex-y-gap)) / var(--hex-rows) ); position: absolute; width: var(--hex-width); height: var(--hex-height); top: calc((var(--hex-height) + var(--hex-y-gap)) * var(--hex-row)); left: calc((var(--hex-width) * 3 / 4 + var(--hex-x-gap)) * var(--hex-col)); ` return <div className={colStyle} style={{ "--hex-row": row + (col % 2 === 0 ? .5 : 0), "--hex-col": col } as CSSProperties} > <div className={css` position: absolute; inset: 0; display: grid; grid-template: 100% / 100%; `} > {children} </div> </div> }