Response examples with status code tabs (#2448)

.changeset/strange-eyes-notice.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Adds tabs to Response Example section e.g. for status code examples

packages/react-openapi/src/OpenAPIResponseExample.tsx

@@ -36,37 +36,47 @@ export function OpenAPIResponseExample(props: {
         }
         return Number(a) - Number(b);
     });
-    // Take the first one
-    const response = responses[0];
 
-    if (!response) {
+    const examples = responses
-        return null;
+        .map((response) => {
-    }
+            const responseObject = noReference(response[1]);
 
-    const responseObject = noReference(response[1]);
+            const schema = noReference(
+                (
+                    responseObject.content?.['application/json'] ??
+                    responseObject.content?.[Object.keys(responseObject.content)[0]]
+                )?.schema,
+            );
 
-    const schema = noReference(
+            if (!schema) {
-        (
+                return null;
-            responseObject.content?.['application/json'] ??
+            }
-            responseObject.content?.[Object.keys(responseObject.content)[0]]
-        )?.schema,
-    );
 
-    if (!schema) {
+            const example = generateSchemaExample(schema);
-        return null;
+            return {
-    }
+                key: `${response[0]}`,
+                label: `${response[0]}`,
+                body: (
+                    <context.CodeBlock
+                        code={
+                            typeof example === 'string' ? example : JSON.stringify(example, null, 2)
+                        }
+                        syntax="json"
+                    />
+                ),
+            };
+        })
+        .filter((val): val is { key: string; label: string; body: any } => Boolean(val));
 
-    const example = generateSchemaExample(schema);
+    if (examples.length === 0) {
-    if (example === undefined) {
         return null;
     }
 
     return (
-        <InteractiveSection header="Response" className="openapi-response-example">
+        <InteractiveSection
-            <context.CodeBlock
+            header="Response"
-                code={typeof example === 'string' ? example : JSON.stringify(example, null, 2)}
+            className="openapi-response-example"
-                syntax="json"
+            tabs={examples}
-            />
+        />
-        </InteractiveSection>
     );
 }