@smitch/fluid/lib/statbar/StatBar.js

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { round } from '@smitch/js-lib';
import { twMerge } from 'tailwind-merge';
import { Heading } from '..';
var StatBar = function (_a) {
    var title = _a.title, _b = _a.titleAlign, titleAlign = _b === void 0 ? 'center' : _b, _c = _a.titleSize, titleSize = _c === void 0 ? 4 : _c, _d = _a.titleWeight, titleWeight = _d === void 0 ? 'semibold' : _d, labels = _a.labels, _e = _a.showLabels, showLabels = _e === void 0 ? true : _e, data = _a.data, _f = _a.colors, colors = _f === void 0 ? ['rgb(255, 219, 40)', 'rgb(20, 20, 20)'] : _f, className = _a.className, style = _a.style;
    var total = data[0] + data[1];
    var percentage1 = total === 0 ? 50 : (data[0] / total) * 100;
    return (_jsxs("div", { className: twMerge("statbar", className), style: style, children: [showLabels ? (_jsxs("div", { className: 'statbar-labels flex justify-center gap-4 mb-2', children: [_jsxs("div", { className: 'flex gap-2 items-center', children: [labels[0], ' ', _jsx("div", { className: "aspect-square w-4", style: { backgroundColor: colors[0] } })] }), _jsxs("div", { className: 'flex gap-2 items-center', children: [_jsx("div", { className: "aspect-square w-4", style: { backgroundColor: colors[1] } }), labels[1]] })] })) : null, title ? (_jsx(Heading, { level: titleSize, align: titleAlign, weight: titleWeight, className: 'mb-2', children: title })) : null, _jsxs("div", { className: 'grid grid-cols-12 gap-1', children: [_jsx("div", { className: 'text-center', children: round(data[0]) }), _jsx("div", { className: 'col-span-10', children: _jsx("progress", { value: percentage1, max: 100, className: "w-full h-6 appearance-none", style: {
                                '--progress-bar-bg': colors[1],
                                '--progress-value-bg': colors[0],
                            } }) }), _jsx("div", { className: 'text-center', children: round(data[1]) })] }), _jsx("style", { children: "\n                    progress::-webkit-progress-bar {\n                        background-color: var(--progress-bar-bg);\n                    }\n                    progress::-webkit-progress-value {\n                        background-color: var(--progress-value-bg);\n                    }\n                    progress::-moz-progress-bar {\n                        background-color: var(--progress-value-bg);\n                    }\n                " })] }));
};
export default StatBar;
//# sourceMappingURL=StatBar.js.map