@smitch/fluid/lib/pictogram/Pictogram.js

A Next/React ui-component libray.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { twMerge } from 'tailwind-merge';
var captionSideClasses = {
    top: 'caption-top',
    bottom: 'caption-bottom',
};
var Pictogram = function (_a) {
    var labels = _a.labels, tally = _a.tally, _b = _a.icon, icon = _b === void 0 ? '●' : _b, caption = _a.caption, _c = _a.captionSide, captionSide = _c === void 0 ? 'top' : _c, className = _a.className, style = _a.style;
    return (_jsxs("table", { className: twMerge('pictogram table', className), style: style, children: [caption ? (_jsx("caption", { className: "".concat(captionSideClasses[captionSide], " ").concat(captionSide === 'top' ? 'pb-2' : 'pt-2', " px-2 whitespace-nowrap font-semibold"), children: caption })) : null, _jsx("tbody", { children: labels.map(function (label, index) { return (_jsxs("tr", { children: [_jsx("th", { className: 'font-semibold text-left p-2', children: label }), _jsx("td", { className: 'p-2', children: tally[index] > 0
                                ? Array.from({ length: tally[index] }, function (_, i) { return (_jsx("span", { className: 'inline-block', children: icon }, i)); })
                                : '-' })] }, index)); }) })] }));
};
export default Pictogram;