From 51955dae3b9ff888f4f3ab3a03072bf7037a7778 Mon Sep 17 00:00:00 2001
From: Brett Jephson <brett@gitbook.io>
Date: Fri, 6 Sep 2024 09:35:43 +0100
Subject: [PATCH] Response examples with status code tabs (#2448)

---
 .changeset/strange-eyes-notice.md             |  5 ++
 .../src/OpenAPIResponseExample.tsx            | 56 +++++++++++--------
 2 files changed, 38 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/strange-eyes-notice.md

diff --git a/.changeset/strange-eyes-notice.md b/.changeset/strange-eyes-notice.md
new file mode 100644
index 000000000..ab531b0e9
--- /dev/null
+++ b/.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
diff --git a/packages/react-openapi/src/OpenAPIResponseExample.tsx b/packages/react-openapi/src/OpenAPIResponseExample.tsx
index ed1bbe486..9aa5a2690 100644
--- a/packages/react-openapi/src/OpenAPIResponseExample.tsx
+++ b/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) {
-        return null;
-    }
+    const examples = responses
+        .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(
-        (
-            responseObject.content?.['application/json'] ??
-            responseObject.content?.[Object.keys(responseObject.content)[0]]
-        )?.schema,
-    );
+            if (!schema) {
+                return null;
+            }
 
-    if (!schema) {
-        return null;
-    }
+            const example = generateSchemaExample(schema);
+            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 (example === undefined) {
+    if (examples.length === 0) {
         return null;
     }
 
     return (
-        <InteractiveSection header="Response" className="openapi-response-example">
-            <context.CodeBlock
-                code={typeof example === 'string' ? example : JSON.stringify(example, null, 2)}
-                syntax="json"
-            />
-        </InteractiveSection>
+        <InteractiveSection
+            header="Response"
+            className="openapi-response-example"
+            tabs={examples}
+        />
     );
 }