fumadocs-ui
Version:
The Radix UI version of Fumadocs UI
118 lines (117 loc) • 4.82 kB
JavaScript
"use client";
import { cn } from "../utils/cn.js";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
import Link from "fumadocs-core/link";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { ChevronDown } from "lucide-react";
import { cva } from "class-variance-authority";
import { useEffect, useState } from "react";
import { useTranslations } from "@fuma-translate/react";
//#region src/components/type-table.tsx
const fieldVariants = cva("text-fd-muted-foreground not-prose pe-2");
function TypeTable({ id, type, className, ...props }) {
const t = useTranslations({ note: "type table" });
return /* @__PURE__ */ jsxs("div", {
id,
className: cn("@container flex flex-col p-1 bg-fd-card text-fd-card-foreground rounded-2xl border my-6 text-sm overflow-hidden", className),
...props,
children: [/* @__PURE__ */ jsxs("div", {
className: "flex font-medium items-center px-3 py-1 not-prose text-fd-muted-foreground",
children: [/* @__PURE__ */ jsx("p", {
className: "w-1/4",
children: t("Prop")
}), /* @__PURE__ */ jsx("p", {
className: "@max-xl:hidden",
children: t("Type")
})]
}), Object.entries(type).map(([key, value]) => /* @__PURE__ */ jsx(Item, {
parentId: id,
name: key,
item: value
}, key))]
});
}
function Item({ parentId, name, item: { parameters = [], description, required = false, deprecated, typeDescription, default: defaultValue, type, typeDescriptionLink, returns } }) {
const t = useTranslations({ note: "type table" });
const [open, setOpen] = useState(false);
const id = parentId ? `${parentId}-${name}` : void 0;
useEffect(() => {
const hash = window.location.hash;
if (!id || !hash) return;
if (`#${id}` === hash) setOpen(true);
}, [id]);
return /* @__PURE__ */ jsxs(Collapsible, {
id,
open,
onOpenChange: (v) => {
if (v && id) window.history.replaceState(null, "", `#${id}`);
setOpen(v);
},
className: cn("rounded-xl border overflow-hidden scroll-m-20 transition-all", open ? "shadow-sm bg-fd-background not-last:mb-2" : "border-transparent"),
children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
className: "relative flex flex-row items-center w-full group text-start px-3 py-2 not-prose hover:bg-fd-accent",
children: [
/* @__PURE__ */ jsxs("code", {
className: cn("text-fd-primary min-w-fit w-1/4 font-mono font-medium pe-2", deprecated && "line-through text-fd-primary/50"),
children: [name, !required && "?"]
}),
typeDescriptionLink ? /* @__PURE__ */ jsx(Link, {
href: typeDescriptionLink,
className: "underline @max-xl:hidden",
children: type
}) : /* @__PURE__ */ jsx("span", {
className: "@max-xl:hidden",
children: type
}),
/* @__PURE__ */ jsx(ChevronDown, { className: "absolute end-2 size-4 text-fd-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
]
}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxs("div", {
className: "grid grid-cols-[1fr_3fr] gap-y-4 text-sm p-3 overflow-auto fd-scroll-container border-t",
children: [
/* @__PURE__ */ jsx("div", {
className: "text-sm prose col-span-full prose-no-margin empty:hidden",
children: description
}),
typeDescription && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
className: cn(fieldVariants()),
children: t("Type")
}), /* @__PURE__ */ jsx("p", {
className: "my-auto not-prose",
children: typeDescription
})] }),
defaultValue && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
className: cn(fieldVariants()),
children: t("Default")
}), /* @__PURE__ */ jsx("p", {
className: "my-auto not-prose",
children: defaultValue
})] }),
parameters.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
className: cn(fieldVariants()),
children: t("Parameters")
}), /* @__PURE__ */ jsx("div", {
className: "flex flex-col gap-2",
children: parameters.map((param) => /* @__PURE__ */ jsxs("div", {
className: "inline-flex items-center flex-wrap gap-1",
children: [/* @__PURE__ */ jsxs("p", {
className: "font-medium not-prose text-nowrap",
children: [param.name, " -"]
}), /* @__PURE__ */ jsx("div", {
className: "text-sm prose prose-no-margin",
children: param.description
})]
}, param.name))
})] }),
returns && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
className: cn(fieldVariants()),
children: t("Returns")
}), /* @__PURE__ */ jsx("div", {
className: "my-auto text-sm prose prose-no-margin",
children: returns
})] })
]
}) })]
});
}
//#endregion
export { TypeTable };