@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
38 lines (37 loc) • 1.39 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Badge = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
require("./Badge.css");
const Badge = ({ content, variant = 'primary', size = 'medium', dot = false, max, children, className = '', }) => {
const displayContent = react_1.default.useMemo(() => {
if (dot)
return null;
if (content === undefined || content === null)
return null;
if (typeof content === 'number' && max && content > max) {
return `${max}+`;
}
return content;
}, [content, dot, max]);
const rootClassName = [
'ds-badge',
`ds-badge--${variant}`,
`ds-badge--${size}`,
dot && 'ds-badge--dot',
!children && 'ds-badge--standalone',
className,
]
.filter(Boolean)
.join(' ');
const badgeElement = ((0, jsx_runtime_1.jsx)("span", { className: rootClassName, children: displayContent }));
if (!children) {
return badgeElement;
}
return ((0, jsx_runtime_1.jsxs)("div", { className: "ds-badge-wrapper", children: [children, badgeElement] }));
};
exports.Badge = Badge;