stackpress
Version:
Incept is a content management framework.
26 lines (25 loc) • 1.99 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const Item = ({ href, label, icon, last }) => {
const item = href
? _jsx("a", { href: href, className: "inline-flex items-center text-t-info", children: label })
: _jsx("span", { className: "inline-flex items-center font-semibold text-t1", children: label });
return (_jsxs(_Fragment, { children: [icon && _jsx("i", { className: `theme-tx1 fas fa-fw fa-${icon} inline-block px-mr-5` }), item, !last && _jsx("i", { className: "fas fa-fw fa-chevron-right mx-1 text-t1" })] }));
};
const Header = ({ trail }) => {
if (trail.length === 0)
return null;
const item = trail[trail.length - 1];
const href = item.href || trail[trail.length - 2]?.href;
if (href) {
return (_jsxs("a", { className: "flex md:hidden items-center cursor-pointer whitespace-nowrap overflow-x-hidden", href: href, children: [_jsx("i", { className: "theme-tx2 px-mr-5 fas fa-fw fa-chevron-left text-xl" }), !!item.icon && _jsx("i", { className: `px-mr-2 fas fa-fw fa-${item.icon} text-sm` }), _jsx("span", { className: "font-bold", children: item.label })] }));
}
return (_jsxs("div", { className: "flex md:hidden items-center whitespace-nowrap overflow-x-hidden", children: [!!item.icon && _jsx("i", { className: `px-mr-2 fas fa-fw fa-${item.icon} text-sm` }), _jsx("span", { className: "font-bold", children: item.label })] }));
};
export default function Crumbs({ crumbs, className }) {
const trail = [...crumbs].filter(item => !!item.label);
const classNames = ['hidden md:flex items-center whitespace-nowrap overflow-x-auto'];
if (className) {
classNames.push(className);
}
return (_jsxs("nav", { children: [_jsx("div", { className: classNames.join(' '), children: trail.map((item, key) => (_jsx(Item, { href: item.href, label: item.label, icon: item.icon, last: key === (trail.length - 1) }, key))) }), _jsx(Header, { trail: trail })] }));
}