@frontify/fondue
Version:
Design system of Frontify
37 lines (36 loc) • 1.16 kB
JavaScript
import { jsx as e } from "react/jsx-runtime";
import { useBreadcrumbs as l } from "@react-aria/breadcrumbs";
import { merge as i } from "../../utilities/merge.es.js";
import { FormattedBreadcrumbs as n } from "./FormattedBreadcrumbs.es.js";
const p = (r) => ({
children: r.map(({ label: a }, t) => /* @__PURE__ */ e("li", { "aria-label": a, children: a }, `breadcrumb-${t}`))
}), u = {
None: "tw-gap-y-0",
Small: "tw-gap-y-0.5",
Medium: "tw-gap-y-1"
}, b = ({
items: r,
keepRoot: a = !0,
truncate: t = !1,
activeInline: m = !1,
"data-test-id": s = "breadcrumb",
verticalGap: o = "Medium"
/* Medium */
}) => {
const d = p(r), { navProps: c } = l(d);
return /* @__PURE__ */ e("nav", { ...c, className: "tw-font-sans", "aria-label": "Breadcrumb", "data-test-id": s, children: /* @__PURE__ */ e("ol", { className: i(["tw-list-none tw-flex tw-flex-wrap", u[o]]), children: /* @__PURE__ */ e(
n,
{
items: r,
keepRoot: a,
truncate: t,
activeInline: m,
"data-test-id": s
}
) }) });
};
b.displayName = "FondueBreadcrumbs";
export {
b as Breadcrumbs
};
//# sourceMappingURL=Breadcrumbs.es.js.map