@clubmed/trident-ui/ui/Breadcrumb.js

Shared ClubMed React UI components

import { jsx as a } from "react/jsx-runtime";
import { createElement as k } from "react";
import { c as l } from "../chunks/clsx.js";
import { getTheme as w } from "./Breadcrumb.themes.js";
import { Icon as B } from "@clubmed/trident-icons";
const j = ({
  className: m,
  items: e,
  theme: i = "light",
  ...h
}) => {
  if (e.length == 0)
    return null;
  const [d, f, , ...t] = e, p = t.length ? t[t.length - 1] : e[e.length - 1], g = { label: "", href: "", className: "breadcrumb-spacer" }, s = t.length ? [d, f, g, p] : e, { thStart: u, thEnd: x } = w(i);
  return /* @__PURE__ */ a(
    "nav",
    {
      role: "navigation",
      "aria-label": "Breadcrumb",
      ...h,
      className: l(m, "overflow-hidden"),
      "data-name": "Breadcrumb",
      children: /* @__PURE__ */ a("ol", { className: "scrollbar-hidden flex items-center overflow-x-auto font-sans text-b4", children: s.map(({ label: n, href: o, className: b, ...N }, c) => {
        const r = c === s.length - 1, v = o && !r;
        return /* @__PURE__ */ k(
          "li",
          {
            ...N,
            ...r && { "aria-current": "page" },
            className: l(
              "flex shrink-0 items-center",
              {
                [u]: !r,
                [x]: r
              },
              b
            ),
            key: `${n}-${c}`
          },
          v ? /* @__PURE__ */ a("a", { href: o, children: n }) : n,
          !r && /* @__PURE__ */ a(B, { className: "mx-4", name: "Diamond", width: "14px" })
        );
      }) })
    }
  );
};
export {
  j as Breadcrumb
};
//# sourceMappingURL=Breadcrumb.js.map