import {RichText} from "@wordpress/block-editor"; export default function TableHead( {headers, updateHeader, tableStyles, states} ) { const { headerBackground, headerTextColor, headerTextAlign, headerFontStyle, headerTextDecoration, headerFontSize, headerFontWeight, headerBorderColumnColor, headerBorderColumnWidthLeft, headerBorderColumnWidthRight, headerBorderRowColor, headerBorderRowWidthTop, headerBorderRowWidthBottom, } = tableStyles; return ( <thead className={"fitb-item-table-header"} style={{ borderStyle: "solid", borderColor: headerBorderRowColor, borderTopWidth: headerBorderRowWidthTop, borderBottomWidth: headerBorderRowWidthBottom, }}> <tr className={"fitb-item-table-header-row"} style={{ background: headerBackground, }}> {headers.map((header, index) => ( states[index] ? <th className={"fitb-item-table-header-cell"} key={index} style={{ borderStyle: "solid", borderColor: headerBorderColumnColor, borderLeftWidth: headerBorderColumnWidthLeft, borderRightWidth: headerBorderColumnWidthRight, }}> <RichText tagName="div" key={index} value={header} style={{ color: headerTextColor, textAlign: headerTextAlign, fontStyle: headerFontStyle, textDecoration: headerTextDecoration, fontSize: headerFontSize, fontWeight: headerFontWeight, }} onChange={(value) => updateHeader(index, value)} /> </th> : '' ))} </tr> </thead>); }