HexGrid component for spacing multiple hexagons flexibly

[thclark]

Currently, multi hexagon views put the same image into each hexagon, which (despite what the designer has done!!) we won't ever want. We need a different image for each hexagon.

We also are ending up with a lot of similar components for creating essentially the same hexagon pattern. Let's try to make code more reusable and versatile here.

I'd suggest you create a HexGrid component, and provide it a set of grid coordinates into a parametric hexagonal grid, along with components to render at those locations?

For example, the API for the pattern being used here would be something like:

const hexGridComponents = [
  {
    x: 0,
    y: 0,
    Component: <SimpleHexagon image={image1} />,
  },
  {
    x: 1,
    y: 0,
    Component: <SimpleHexagon image={image2} />,
  },
  {
    x: 1,
    y: 1,
    Component: <SimpleHexagon image={image3} />,
  },
  {
    x: 2,
    y: 1,
    Component: <SimpleHexagon image={image4} />,
  },
]

const hexGridOffset = '40px' // Or whatever the characteristic lateral spacing is

return (
  <HexGrid components={hexGridComponents} offset={hexGridOffset} />
)

Despite "parametric coordinate system sounding fancy, it basically means offset by different amounts than normal x,y coords, so it conforms with a hexagonal pattern. Here would be the (x,y) coordinates for a group of hexagons...

_Originally posted by @thclark in https://github.com/octue/planex-site/pull/65#discussion_r678493503_