fumadocs-openapi/dist/scalar/client.js

Generate MDX docs for your OpenAPI spec

'use client';

import { cn } from "../utils/cn.js";
import { MethodLabel } from "../ui/components/method-label.js";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { buttonVariants } from "fumadocs-ui/components/ui/button";
import { ApiClientModalProvider, useApiClientModal } from "@scalar/api-client-react";
import { useTheme } from "next-themes";
import "@scalar/api-client-react/style.css";

//#region src/scalar/client.tsx
function ScalarPlayground({ path, method, spec }) {
	const { resolvedTheme } = useTheme();
	const [mounted, setMounted] = useState(false);
	useEffect(() => {
		setMounted(true);
	}, []);
	return /* @__PURE__ */ jsxs("div", {
		className: cn("flex flex-row items-center gap-2.5 p-3 rounded-xl border bg-fd-card text-fd-card-foreground not-prose", mounted ? `${resolvedTheme}-mode` : null),
		children: [
			/* @__PURE__ */ jsx(MethodLabel, {
				className: "text-xs",
				children: method
			}),
			/* @__PURE__ */ jsx("code", {
				className: "flex-1 overflow-auto text-nowrap text-[0.8125rem] text-fd-muted-foreground",
				children: path
			}),
			/* @__PURE__ */ jsx(ApiClientModalProvider, {
				configuration: {
					theme: "moon",
					content: spec
				},
				children: /* @__PURE__ */ jsx(Trigger, {
					path,
					method
				})
			})
		]
	});
}
function Trigger({ path, method }) {
	const client = useApiClientModal();
	return /* @__PURE__ */ jsx("button", {
		type: "submit",
		className: cn(buttonVariants({
			color: "primary",
			size: "sm"
		}), "px-3 py-1.5"),
		onClick: () => client?.open({
			path,
			method
		}),
		children: "Test"
	});
}

//#endregion
export { ScalarPlayground as default };
//# sourceMappingURL=client.js.map