OpenAPI: Improve response type UX

.changeset/quiet-singers-begin.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': patch
+---
+
+Improve response type UX

packages/openapi/src/render/operation/index.tsx

@@ -26,8 +26,8 @@ import {
 import { MethodLabel } from '@/ui/components/method-label';
 import { type RequestData, supportedMediaTypes } from '@/requests/_shared';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
-import { CodeBlock } from '@/render/codeblock';
 import { getTypescriptSchema } from '@/utils/get-typescript-schema';
+import { CopyResponseTypeScript } from '@/ui/client';
 
 export interface CodeSample {
   lang: string;
@@ -286,7 +286,7 @@ async function ResponseTab({
         />
       )}
 
-      {ts && <CodeBlock lang="ts" code={ts} ctx={ctx} className="mt-4" />}
+      {ts && <CopyResponseTypeScript code={ts} />}
     </Tab>
   );
 }

packages/openapi/src/ui/client.tsx

@@ -1,3 +1,42 @@
 'use client';
 
+import { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';
+import { buttonVariants } from 'fumadocs-ui/components/ui/button';
+import { cn } from 'fumadocs-ui/utils/cn';
+import { Check, Copy } from 'lucide-react';
+
 export { ClientLazy as APIPlayground } from '@/playground/client.lazy';
+
+export function CopyResponseTypeScript({ code }: { code: string }) {
+  const [isChecked, onCopy] = useCopyButton(() => {
+    void navigator.clipboard.writeText(code);
+  });
+
+  return (
+    <div className="flex items-start justify-between gap-2 bg-fd-card border rounded-xl p-3 not-prose mt-4 first:mt-0">
+      <div>
+        <p className="font-medium text-fd-foreground mb-2">
+          TypeScript Definitions
+        </p>
+        <p className="text-xs">Use the response body type in TypeScript.</p>
+      </div>
+      <button
+        onClick={onCopy}
+        className={cn(
+          buttonVariants({
+            color: 'secondary',
+            className: 'p-2 gap-2',
+            size: 'sm',
+          }),
+        )}
+      >
+        {isChecked ? (
+          <Check className="size-3.5" />
+        ) : (
+          <Copy className="size-3.5" />
+        )}
+        Copy
+      </button>
+    </div>
+  );
+}