@smitch/fluid
Version:
A Next/React ui-component libray.
57 lines (56 loc) • 2.51 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
var backgrounds = {
info: 'bg-info',
success: 'bg-success',
warning: 'bg-warning',
danger: 'bg-danger',
primary: 'bg-primary',
secondary: 'bg-secondary',
dark: 'bg-dark',
light: 'bg-white',
accent: 'bg-accent',
neutral: 'bg-neutral',
transparent: 'bg-transparent',
};
var colors = {
info: '!text-info',
success: 'text-success',
warning: 'text-warning',
danger: '!text-danger',
primary: 'text-primary',
secondary: 'text-secondary',
dark: 'text-dark',
light: 'text-light',
accent: 'text-accent',
current: 'text-current',
neutral: 'text-neutral',
};
var layouts = {
square: 'aspect-square p-[.15em] leading-3',
circle: 'rounded-full aspect-square p-[.175em] leading-3',
rounded: 'rounded-md px-[.25em] py-[.1em] leading-5',
pill: 'rounded-full px-[.25em] py-[.1em] leading-5',
};
var sizes = {
sm: 'text-sm',
md: 'text-base',
lg: 'text-lg',
inherit: 'text-[60%]',
};
var positions = {
inline: 'relative -top-3',
right: 'absolute end-0 top-0',
left: 'absolute -start-6',
};
var Badge = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, _c = _a.layout, layout = _c === void 0 ? 'circle' : _c, _d = _a.badgeBackground, badgeBackground = _d === void 0 ? 'info' : _d, _e = _a.badgeColor, badgeColor = _e === void 0 ? 'dark' : _e, _f = _a.position, position = _f === void 0 ? 'inline' : _f, children = _a.children, _g = _a.size, size = _g === void 0 ? 'inherit' : _g;
var layoutClasses = useMemo(function () { return layouts[layout]; }, [layout]);
var backgroundClasses = useMemo(function () { return backgrounds[badgeBackground]; }, [badgeBackground]);
var colorClasses = useMemo(function () { return colors[badgeColor]; }, [badgeColor]);
var positionClasses = useMemo(function () { return positions[position]; }, [position]);
var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
return (_jsx("small", { className: twMerge("badge group inline-block leading-none min-w-[1em] ".concat(sizeClasses, " ").concat(layoutClasses, " ").concat(backgroundClasses, " ").concat(colorClasses, " ").concat(positionClasses), className), style: style, "data-testid": 'badge', children: _jsx("span", { className: 'flex items-center gap-1', children: children }) }));
};
export default Badge;