@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
27 lines (26 loc) • 1.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Breadcrumb = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./Breadcrumb.css");
const Icon_1 = require("../Icon");
const Breadcrumb = ({ items, separator = (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-right", size: 16 }), className = '', }) => {
const rootClassName = ['ds-breadcrumb', className].filter(Boolean).join(' ');
const handleClick = (e, item) => {
if (item.onClick) {
e.preventDefault();
item.onClick();
}
};
return ((0, jsx_runtime_1.jsx)("nav", { className: rootClassName, "aria-label": "Breadcrumb", children: (0, jsx_runtime_1.jsx)("ol", { className: "ds-breadcrumb__list", children: items.map((item, index) => {
const isLast = index === items.length - 1;
const itemClassName = [
'ds-breadcrumb__item',
isLast && 'ds-breadcrumb__item--current',
]
.filter(Boolean)
.join(' ');
return ((0, jsx_runtime_1.jsxs)("li", { className: itemClassName, children: [item.href && !isLast ? ((0, jsx_runtime_1.jsx)("a", { href: item.href, className: "ds-breadcrumb__link", onClick: (e) => handleClick(e, item), "aria-current": isLast ? 'page' : undefined, children: item.label })) : ((0, jsx_runtime_1.jsx)("span", { className: "ds-breadcrumb__text", children: item.label })), !isLast && ((0, jsx_runtime_1.jsx)("span", { className: "ds-breadcrumb__separator", "aria-hidden": "true", children: separator }))] }, index));
}) }) }));
};
exports.Breadcrumb = Breadcrumb;