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

A lightweight, Tailwind-powered React/Next.js UI component library.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { twMerge } from "tailwind-merge";
var captionSideClasses = {
    top: "caption-top",
    bottom: "caption-bottom",
};
var sizes = {
    md: "text-base",
    lg: "text-lg",
    xl: "text-2xl",
};
var Pictogram = function (_a) {
    var labels = _a.labels, tally = _a.tally, _b = _a.icon, icon = _b === void 0 ? "●" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, caption = _a.caption, _d = _a.captionSide, captionSide = _d === void 0 ? "top" : _d, className = _a.className, style = _a.style;
    var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
    return (_jsxs("table", { className: twMerge("pictogram table ".concat(sizeClasses), 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;
//# sourceMappingURL=Pictogram.js.map