stackpress
Version:
Incept is a content management framework.
26 lines (25 loc) • 1.67 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: "crumb", children: label })
: _jsx("span", { className: "crumb", children: label });
return (_jsxs(_Fragment, { children: [icon && _jsx("i", { className: `icon fas fa-fw fa-${icon}` }), item, !last && _jsx("i", { className: "next fas fa-fw fa-chevron-right" })] }));
};
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: "crumbs-header", href: href, children: [_jsx("i", { className: "back fas fa-fw fa-chevron-left" }), !!item.icon && _jsx("i", { className: `icon fas fa-fw fa-${item.icon}` }), _jsx("span", { className: "label", children: item.label })] }));
}
return (_jsxs("div", { className: "crumbs-header", children: [!!item.icon && _jsx("i", { className: `icon fas fa-fw fa-${item.icon}` }), _jsx("span", { className: "label", children: item.label })] }));
};
export default function Crumbs({ crumbs, className }) {
const trail = [...crumbs].filter(item => !!item.label);
const classNames = ['crumbs'];
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 })] }));
}