fumadocs-ui/dist/layouts/docs/client.js

The Radix UI version of Fumadocs UI

'use client';

import { useSidebar } from "../../components/sidebar/base.js";
import { isTabActive } from "../../components/sidebar/tabs/dropdown.js";
import Link from "fumadocs-core/link";
import { usePathname } from "fumadocs-core/framework";
import { cn } from "@fumadocs/ui/cn";
import { jsx } from "react/jsx-runtime";
import { createContext, use, useMemo } from "react";
import { useIsScrollTop } from "@fumadocs/ui/hooks/use-is-scroll-top";

//#region src/layouts/docs/client.tsx
const LayoutContext = createContext(null);
function LayoutContextProvider({ navTransparentMode = "none", children }) {
	const isTop = useIsScrollTop({ enabled: navTransparentMode === "top" }) ?? true;
	const isNavTransparent = navTransparentMode === "top" ? isTop : navTransparentMode === "always";
	return /* @__PURE__ */ jsx(LayoutContext, {
		value: useMemo(() => ({ isNavTransparent }), [isNavTransparent]),
		children
	});
}
function LayoutHeader(props) {
	const { isNavTransparent } = use(LayoutContext);
	return /* @__PURE__ */ jsx("header", {
		"data-transparent": isNavTransparent,
		...props,
		children: props.children
	});
}
function LayoutBody({ className, style, children, ...props }) {
	const { collapsed } = useSidebar();
	return /* @__PURE__ */ jsx("div", {
		id: "nd-docs-layout",
		className: cn("grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]", className),
		"data-sidebar-collapsed": collapsed,
		style: {
			gridTemplate: `"sidebar header toc"
        "sidebar toc-popover toc"
        "sidebar main toc" 1fr / minmax(var(--fd-sidebar-col), 1fr) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) minmax(min-content, 1fr)`,
			"--fd-docs-row-1": "var(--fd-banner-height, 0px)",
			"--fd-docs-row-2": "calc(var(--fd-docs-row-1) + var(--fd-header-height))",
			"--fd-docs-row-3": "calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))",
			"--fd-sidebar-col": collapsed ? "0px" : "var(--fd-sidebar-width)",
			...style
		},
		...props,
		children
	});
}
function LayoutTabs({ options, ...props }) {
	const pathname = usePathname();
	const selected = useMemo(() => {
		return options.findLast((option) => isTabActive(option, pathname));
	}, [options, pathname]);
	return /* @__PURE__ */ jsx("div", {
		...props,
		className: cn("flex flex-row items-end gap-6 overflow-auto [grid-area:main]", props.className),
		children: options.map((option, i) => /* @__PURE__ */ jsx(Link, {
			href: option.url,
			className: cn("inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground", option.unlisted && selected !== option && "hidden", selected === option && "border-fd-primary text-fd-primary"),
			children: option.title
		}, i))
	});
}

//#endregion
export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutTabs };
//# sourceMappingURL=client.js.map