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,13 +36,9 @@ export function OpenAPIResponseExample(props: {
         }
         return Number(a) - Number(b);
     });
-    // Take the first one
-    const response = responses[0];
-
-    if (!response) {
-        return null;
-    }
 
+    const examples = responses
+        .map((response) => {
             const responseObject = noReference(response[1]);
 
             const schema = noReference(
@@ -57,16 +53,30 @@ export function OpenAPIResponseExample(props: {
             }
 
             const example = generateSchemaExample(schema);
-    if (example === undefined) {
+            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));
+
+    if (examples.length === 0) {
         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>
     );
 }