phx-react
Version:
PHX REACT
30 lines • 2.04 kB
JavaScript
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXBreadcrumb = PHXBreadcrumb;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const link_1 = tslib_1.__importDefault(require("../Link/link"));
const types_1 = require("../types");
function PHXBreadcrumb({ items, className, separator = react_1.default.createElement("span", { className: 'mx-2 text-gray-400' }, "/"), }) {
return (react_1.default.createElement("nav", { "aria-label": 'Breadcrumb', className: (0, types_1.classNames)('min-w-0', className) },
react_1.default.createElement("ol", { className: 'flex min-w-0 flex-wrap items-center text-xs leading-6 text-gray-600 sm:leading-7' }, items.map((item, index) => {
var _a;
const isCurrent = (_a = item.current) !== null && _a !== void 0 ? _a : index === items.length - 1;
const isInteractive = !isCurrent && (item.href || item.onClick);
let content;
if (isInteractive && item.href) {
content = (react_1.default.createElement(link_1.default, { className: 'cursor-pointer transition hover:text-gray-700 hover:underline', href: item.href }, item.label));
}
else if (isInteractive && item.onClick) {
content = (react_1.default.createElement("button", { className: 'cursor-pointer transition hover:text-gray-700 hover:underline', onClick: item.onClick, type: 'button' }, item.label));
}
else {
content = react_1.default.createElement("span", { className: (0, types_1.classNames)(isCurrent ? 'text-gray-600' : 'text-gray-600') }, item.label);
}
return (react_1.default.createElement("li", { key: index, className: 'flex min-w-0 items-center' },
react_1.default.createElement("span", { className: 'max-w-48 truncate' }, content),
index < items.length - 1 && separator));
}))));
}
//# sourceMappingURL=Breadcrumb.js.map