nextuiq
Version:
NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat
71 lines (68 loc) • 2.24 kB
JavaScript
import { j as jsxRuntimeExports } from './index46.mjs';
import { cn } from './index38.mjs';
const Breadcrumb = ({ items, className }) => {
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"nav",
{
className: cn("flex", className),
"aria-label": "Breadcrumb",
children: /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { className: "flex items-center gap-2", role: "list", children: items.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"li",
{
className: "flex items-center",
"aria-current": index === items.length - 1 ? "page" : void 0,
children: item.href ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: item.href,
className: "text-sm text-[oklch(var(--theme-muted-foreground))] hover:text-[oklch(var(--theme-foreground))]",
"aria-label": `Go to ${item.label}`,
children: item.label
}
),
index < items.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
ChevronIcon,
{
className: "mx-2 h-4 w-4 text-[oklch(var(--theme-muted-foreground))]",
"aria-hidden": "true"
}
)
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: "text-sm font-medium text-[oklch(var(--theme-foreground))]",
"aria-current": "page",
children: item.label
}
)
},
index
)) })
}
);
};
const ChevronIcon = ({ className }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className,
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
role: "presentation",
"aria-hidden": "true",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
d: "M6 12L10 8L6 4",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
}
);
export { Breadcrumb };