fumadocs-ui/dist/components/inline-toc.js

The Radix UI version of Fumadocs UI

"use client";
import { cn } from "../utils/cn.js";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
import { jsx, jsxs } from "react/jsx-runtime";
import { ChevronDown } from "lucide-react";
import { useTranslations } from "@fuma-translate/react";
//#region src/components/inline-toc.tsx
function InlineTOC({ items, ...props }) {
	const t = useTranslations({ note: "inline table of contents" });
	return /* @__PURE__ */ jsxs(Collapsible, {
		...props,
		className: cn("not-prose rounded-lg border bg-fd-card text-fd-card-foreground", props.className),
		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
			className: "group inline-flex w-full items-center justify-between px-4 py-2.5 font-medium",
			children: [props.children ?? t("Table of Contents"), /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 transition-transform duration-200 group-data-[state=open]:rotate-180" })]
		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
			className: "flex flex-col p-4 pt-0 text-sm text-fd-muted-foreground",
			children: items.map((item) => /* @__PURE__ */ jsx("a", {
				href: item.url,
				className: "border-s py-1.5 hover:text-fd-accent-foreground",
				style: { paddingInlineStart: 12 * Math.max(item.depth - 1, 0) },
				children: item.title
			}, item.url))
		}) })]
	});
}
//#endregion
export { InlineTOC };