@trail-ui/react
Version:
53 lines (51 loc) • 1.91 kB
JavaScript
// src/breadcrumbs/breadcrumbs.tsx
import React, { useMemo } from "react";
import { breadcrumb } from "@trail-ui/theme";
import { link } from "@trail-ui/theme";
import { Link as AriaLink } from "react-aria-components";
import {
useBreadcrumbItem,
useBreadcrumbs
} from "react-aria";
import { jsx, jsxs } from "react/jsx-runtime";
function Breadcrumbs(props) {
let { navProps } = useBreadcrumbs(props);
let childCount = React.Children.count(props.children);
const slots = useMemo(() => breadcrumb(props), [props]);
return /* @__PURE__ */ jsx("nav", { ...navProps, children: /* @__PURE__ */ jsx("ol", { className: slots.orderedList(props), children: React.Children.map(
props.children,
(child, i) => child && React.cloneElement(child, {
isCurrent: i === childCount - 1
})
) }) });
}
function BreadcrumbItem(props) {
let ref = React.useRef(null);
let { itemProps } = useBreadcrumbItem(props, ref);
const slots = useMemo(() => breadcrumb(props), [props]);
return /* @__PURE__ */ jsxs("li", { className: slots.base(props), children: [
props.before && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "aria-current": "page", children: props.before }),
/* @__PURE__ */ jsx(
AriaLink,
{
...itemProps,
ref,
href: props.href,
className: link({
underline: props.isCurrent ? "hover" : "always",
color: "foreground",
className: props.isCurrent ? "font-medium" : "font-normal"
}),
onFocus: props.onFocus,
onBlur: props.onBlur,
children: props.children
}
),
props.after && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "aria-current": "page", children: props.after }),
!props.isCurrent && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { padding: "0 5px" }, children: "/" })
] });
}
export {
Breadcrumbs,
BreadcrumbItem
};