caribbean-reservation-react/src/CaribbeanReservation/Head.js

Basically a modular grid which allows you to place tags over it. Created in order to manage reservations for a hotel in the caribbean

import React, { useEffect, useState, useLayoutEffect, useRef } from 'react';
export default function Head(props) {

    const [headRow, setHeadRow] = useState([])

    useEffect(() => {
        if (typeof props.headRow === "function") {
            setHeadRow(props.headRow(props.columnCount))
        }
        else if (Array.isArray(props.headRow)) {
            setHeadRow(props.headRow)
        }
    }, [props.headRow, props.columnCount])



    return (<div className="caribbean-row" id="head" style={{ height: props.dimension, display: "flex" }}>
        <div className="row-cell" style={{ width: props.rowTitleWidth, height: props.dimension + "px" }} />
        {headRow.map((headitem, i) => {
            return <div key={i} style={{ width: props.dimension + "px", height: props.dimension + "px" }} className="row-cell">{headitem}</div>;
        })
        }</div>)

}