fumadocs-ui
Version:
The Radix UI version of Fumadocs UI
52 lines (51 loc) • 2.51 kB
JavaScript
import { cn } from "../../utils/cn.js";
import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
import { isLayoutTabActive } from "../shared/index.js";
import Link from "fumadocs-core/link";
import { usePathname } from "fumadocs-core/framework";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { ChevronsUpDown } from "lucide-react";
import { useState } from "react";
import { useTranslations } from "@fuma-translate/react";
//#region src/layouts/glass/layout-tabs.tsx
function LayoutTabsDropdown({ tabs, className, size = "default", ...props }) {
const pathname = usePathname();
const t = useTranslations();
const selected = tabs.findLast((t) => isLayoutTabActive(t, pathname));
const [open, setOpen] = useState(false);
return /* @__PURE__ */ jsxs(Popover, {
open,
onOpenChange: setOpen,
children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
className: cn("inline-flex items-center gap-2 text-sm font-medium rounded-full transition-colors hover:bg-fd-accent data-[state=open]:bg-fd-accent", size === "lg" && "text-[0.9375rem]", className),
...props,
children: [selected ? /* @__PURE__ */ jsxs(Fragment, { children: [selected.icon, /* @__PURE__ */ jsx("span", {
className: "truncate",
children: selected.title
})] }) : /* @__PURE__ */ jsx("span", {
className: "text-fd-muted-foreground truncate",
children: t("Layout Tab", { note: "layout tab trigger" })
}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: cn("ms-auto shrink-0 text-fd-muted-foreground", size === "default" && "size-3.5!", size === "lg" && "size-4!") })]
}), /* @__PURE__ */ jsx(PopoverContent, {
className: "flex flex-col p-1 rounded-xl w-(--radix-popover-trigger-width)",
align: "start",
children: tabs.map((t, i) => {
if (t.unlisted && t !== selected) return;
return /* @__PURE__ */ jsxs(Link, {
href: t.url,
className: cn("text-sm px-2 py-1.5 rounded-lg", selected === t ? "bg-fd-primary/10 text-fd-primary" : "hover:bg-fd-accent hover:text-fd-accent-foreground"),
onClick: () => setOpen(false),
children: [/* @__PURE__ */ jsxs("div", {
className: "font-medium inline-flex items-center gap-2 [&_svg]:size-4",
children: [t.icon, t.title]
}), /* @__PURE__ */ jsx("p", {
className: cn("mt-1 text-xs text-fd-muted-foreground empty:hidden", selected === t && "text-fd-primary/80"),
children: t.description
})]
}, i);
})
})]
});
}
//#endregion
export { LayoutTabsDropdown };