phx-react
Version:
PHX REACT
26 lines • 1.73 kB
JavaScript
'use client';
import React from 'react';
import PHXLink from '../Link/link';
import { classNames } from '../types';
export function PHXBreadcrumb({ items, className, separator = React.createElement("span", { className: 'mx-2 text-gray-400' }, "/"), }) {
return (React.createElement("nav", { "aria-label": 'Breadcrumb', className: classNames('min-w-0', className) },
React.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.createElement(PHXLink, { className: 'cursor-pointer transition hover:text-gray-700 hover:underline', href: item.href }, item.label));
}
else if (isInteractive && item.onClick) {
content = (React.createElement("button", { className: 'cursor-pointer transition hover:text-gray-700 hover:underline', onClick: item.onClick, type: 'button' }, item.label));
}
else {
content = React.createElement("span", { className: classNames(isCurrent ? 'text-gray-600' : 'text-gray-600') }, item.label);
}
return (React.createElement("li", { key: index, className: 'flex min-w-0 items-center' },
React.createElement("span", { className: 'max-w-48 truncate' }, content),
index < items.length - 1 && separator));
}))));
}
//# sourceMappingURL=Breadcrumb.js.map