Skip to content

Commit 90f3164

Browse files
gautamgambhir97gautamgambhir97
authored
fix(docs): update code blocks size (#1165)
1 parent 5e5b543 commit 90f3164

File tree

5 files changed

+168
-160
lines changed

5 files changed

+168
-160
lines changed

‎components/api-endpoint.tsx‎

Lines changed: 134 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Code, Pre } from "nextra/components";
22
import { CodeBlock } from "./code";
33

44
import React from "react";
5-
import { ApiIntro, Col, Properties, Property, Row } from "./mdx";
5+
import { ApiIntro, Properties, Property, Row } from "./mdx";
66

77
interface PropertyType {
88
name: string;
@@ -165,60 +165,7 @@ const JsonCodeTab: React.FC<{
165165
return <Pre>{formattedJson}</Pre>;
166166
};
167167

168-
export const ApiResponses: React.FC<{
169-
description?: string;
170-
samplePayload: unknown;
171-
properties?: PropertyType[];
172-
}> = (properties) => {
173-
return (
174-
<>
175-
<Row>
176-
<h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90 nx-mt-8 nx-text-2xl">
177-
Responses
178-
</h1>
179-
</Row>
180-
<Row>
181-
<Col>
182-
{properties.description ? (
183-
<ApiIntro>{properties.description}</ApiIntro>
184-
) : undefined}
185-
186-
{properties.properties && properties.properties.length > 0 ? (
187-
<Properties>
188-
{properties.properties.map((property) => {
189-
return (
190-
<Property
191-
key={property.name}
192-
name={property.name}
193-
required={property?.required}
194-
type={property.type}
195-
>
196-
{property.description}
197-
</Property>
198-
);
199-
})}
200-
</Properties>
201-
) : undefined}
202-
</Col>
203-
<Col>
204-
<CodeBlock
205-
hasCopy={true}
206-
codeBlocks={[
207-
{
208-
filename: "HTTP 200",
209-
component: (
210-
<JsonCodeTab samplePayload={properties.samplePayload} />
211-
),
212-
},
213-
]}
214-
/>
215-
</Col>
216-
</Row>
217-
</>
218-
);
219-
};
220-
221-
export const ApiRequest: React.FC<{
168+
export const ApiRequestResponseCombined: React.FC<{
222169
apiUrl: string;
223170
method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
224171
path: string;
@@ -227,78 +174,136 @@ export const ApiRequest: React.FC<{
227174
properties?: PropertyType[];
228175
pathParameters?: Record<string, string>;
229176
isBearerTokenRequired?: boolean;
177+
responseDescription?: string;
178+
responses: unknown;
179+
responseProperties?: PropertyType[];
230180
}> = (properties) => {
231181
return (
232-
<>
233-
<Row>
234-
<h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90 nx-mt-8 nx-text-2xl">
235-
Request
236-
</h1>
237-
</Row>
238-
<Row>
239-
<Col>
240-
{properties.description ? (
241-
<ApiIntro>{properties.description}</ApiIntro>
242-
) : undefined}
243-
{properties.properties && properties.properties.length > 0 ? (
244-
<Properties>
245-
{properties.properties.map((property) => {
246-
return (
247-
<Property
248-
key={property.name}
249-
name={property.name}
250-
required={property?.required}
251-
type={property.type}
252-
>
253-
{property.description}
254-
</Property>
255-
);
256-
})}
257-
</Properties>
258-
) : undefined}
259-
</Col>
260-
<Col>
261-
<CodeBlock
262-
hasCopy={true}
263-
codeBlocks={[
264-
{
265-
filename: "Curl",
266-
component: (
267-
<CurlCodeTab
268-
method={properties.method}
269-
url={properties.apiUrl + properties.path}
270-
samplePayload={properties.samplePayload}
271-
isBearerTokenRequired={properties.isBearerTokenRequired}
272-
/>
273-
),
274-
},
275-
{
276-
filename: "Python",
277-
component: (
278-
<PythonCodeTab
279-
method={properties.method}
280-
url={properties.apiUrl + properties.path}
281-
samplePayload={properties.samplePayload}
282-
pathParameters={properties.pathParameters}
283-
/>
284-
),
285-
},
286-
{
287-
filename: "JavaScript",
288-
component: (
289-
<JavascriptCodeTab
290-
method={properties.method}
291-
url={properties.apiUrl + properties.path}
292-
samplePayload={properties.samplePayload}
293-
pathParameters={properties.pathParameters}
294-
/>
295-
),
296-
},
297-
]}
298-
/>
299-
</Col>
300-
</Row>
301-
</>
182+
<div className="nx-flex nx-col-container nx-justify-between nx-gap-6 nx-height-adjust">
183+
<div className="nx-flex-grow">
184+
<Row>
185+
<div className="nx-endpoint nx-flex nx-text-base">
186+
<div className="nx-flex nx-items-center">
187+
<span className="nextra-content nx-text-sm nx-font-medium dark:nx-text-white-60">
188+
Endpoint:
189+
</span>
190+
<span className="nx-endpoint-method nx-ml-2 nx-text-sm nx-text-fetch-main dark:nx-text-white-90 dark:nx-bg-green-700">
191+
{properties.method}
192+
</span>
193+
</div>
194+
<span className="nx-text-purple nx-text-path nx-font-normal nx-text-sm dark:nx-text-indigo-250">
195+
{properties.path}
196+
</span>
197+
</div>
198+
</Row>
199+
200+
<div className="nx-flex nx-flex-col nx-gap-12">
201+
<div>
202+
<h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90 nx-text-2xl">
203+
Request
204+
</h1>
205+
206+
{properties.description ? (
207+
<ApiIntro>{properties.description}</ApiIntro>
208+
) : undefined}
209+
{properties.properties && properties.properties.length > 0 ? (
210+
<Properties>
211+
{properties.properties.map((property) => {
212+
return (
213+
<Property
214+
key={property.name}
215+
name={property.name}
216+
required={property?.required}
217+
type={property.type}
218+
>
219+
{property.description}
220+
</Property>
221+
);
222+
})}
223+
</Properties>
224+
) : undefined}
225+
</div>
226+
<div>
227+
<h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90 nx-text-2xl">
228+
Responses
229+
</h1>
230+
<div className="nx-pt-4 nx-gap-8">
231+
{properties.responseDescription ? (
232+
<ApiIntro>{properties.responseDescription}</ApiIntro>
233+
) : undefined}
234+
235+
{properties.responseProperties &&
236+
properties.responseProperties.length > 0 ? (
237+
<Properties>
238+
{properties.responseProperties.map((property) => {
239+
return (
240+
<Property
241+
key={property.name}
242+
name={property.name}
243+
required={property?.required}
244+
type={property.type}
245+
>
246+
{property.description}
247+
</Property>
248+
);
249+
})}
250+
</Properties>
251+
) : undefined}
252+
</div>
253+
</div>
254+
</div>
255+
</div>
256+
257+
<div className="nx-flex nx-flex-col nx-gap-12 nx-blocks-margin nx-sticky nx-top-24 nx-self-start">
258+
<CodeBlock
259+
hasCopy={true}
260+
codeBlocks={[
261+
{
262+
filename: "Curl",
263+
component: (
264+
<CurlCodeTab
265+
method={properties.method}
266+
url={properties.apiUrl + properties.path}
267+
samplePayload={properties.samplePayload}
268+
isBearerTokenRequired={properties.isBearerTokenRequired}
269+
/>
270+
),
271+
},
272+
{
273+
filename: "Python",
274+
component: (
275+
<PythonCodeTab
276+
method={properties.method}
277+
url={properties.apiUrl + properties.path}
278+
samplePayload={properties.samplePayload}
279+
pathParameters={properties.pathParameters}
280+
/>
281+
),
282+
},
283+
{
284+
filename: "JavaScript",
285+
component: (
286+
<JavascriptCodeTab
287+
method={properties.method}
288+
url={properties.apiUrl + properties.path}
289+
samplePayload={properties.samplePayload}
290+
pathParameters={properties.pathParameters}
291+
/>
292+
),
293+
},
294+
]}
295+
/>
296+
<CodeBlock
297+
hasCopy={true}
298+
codeBlocks={[
299+
{
300+
filename: "HTTP 200",
301+
component: <JsonCodeTab samplePayload={properties.responses} />,
302+
},
303+
]}
304+
/>
305+
</div>
306+
</div>
302307
);
303308
};
304309

@@ -322,20 +327,7 @@ export const ApiEndpointRequestResponse: React.FC<{
322327
}> = ({ isBearerTokenRequired = true, ...properties }) => {
323328
return (
324329
<>
325-
<Row>
326-
<p className="nx-endpoint nx-text-base">
327-
<span className="nextra-content nx-font-medium dark:nx-text-white-60">
328-
Endpoint:
329-
</span>
330-
<span className="nx-endpoint-method nx-text-fetch-main dark:nx-text-white-90 dark:nx-bg-green-700">
331-
{properties.method}
332-
</span>
333-
<span className="nx-text-purple nx-font-normal dark:nx-text-indigo-250">
334-
{properties.path}
335-
</span>
336-
</p>
337-
</Row>
338-
<ApiRequest
330+
<ApiRequestResponseCombined
339331
apiUrl={properties.apiUrl}
340332
method={properties.method}
341333
path={properties.path}
@@ -344,14 +336,10 @@ export const ApiEndpointRequestResponse: React.FC<{
344336
properties={properties.properties ?? undefined}
345337
pathParameters={properties.pathParameters ?? undefined}
346338
isBearerTokenRequired={isBearerTokenRequired}
339+
responses={properties.responses ?? undefined}
340+
responseProperties={properties.responseProperties ?? undefined}
341+
responseDescription={properties.responseDescription ?? undefined}
347342
/>
348-
{properties.responses ? (
349-
<ApiResponses
350-
samplePayload={properties.responses ?? undefined}
351-
properties={properties.responseProperties ?? undefined}
352-
description={properties.responseDescription ?? undefined}
353-
/>
354-
) : undefined}
355343
</>
356344
);
357345
};

‎components/code.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export const CodeBlock: React.FC<{
222222
};
223223

224224
return (
225-
<div className="pre-out-code">
225+
<div className="pre-out-code nx-h-[25vh] nx-overflow-auto thin-scrollbar">
226226
<header className="nx-w-full nx-flex nx-justify-between">
227227
<Dropdown
228228
options={codeBlocks.map((block) => block.filename)}

‎components/mdx.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export function Properties({ children }: { children: ReactNode }) {
5858
<div className="nx-my-6">
5959
<ul
6060
role="list"
61-
className="nx-m-0 nx-max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] nx-list-none nx-divide-y nx-divide-zinc-900/5 nx-p-0 nx-dark:divide-white/5"
61+
className="nx-m-0 nx-list-none nx-divide-y nx-divide-zinc-900/5 nx-p-0 nx-dark:divide-white/5"
6262
>
6363
{children}
6464
</ul>
@@ -98,7 +98,7 @@ export function Property({
9898
)}
9999

100100
<dt className="nx-sr-only">Description</dt>
101-
<dd className="nx-w-full nx-flex-none [&gt;:first-child]:nx-mt-0 [&gt;:last-child]:nx-mb-0 dark:nx-text-white-60">
101+
<dd className="nx-w-full nx-text-sm nx-flex-none [&gt;:first-child]:nx-mt-0 [&gt;:last-child]:nx-mb-0 dark:nx-text-white-60">
102102
{children}
103103
</dd>
104104
</dl>
@@ -248,7 +248,9 @@ export function Tab(properties) {
248248

249249
export function Row({ children }: { children: ReactNode }) {
250250
return (
251-
<div className="nx-pt-4 nx-gap-8 row-width nx-flex-mdx">{children}</div>
251+
<div className="nx-pt-6 nx-mb-12 nx-gap-8 row-width nx-flex-mdx">
252+
{children}
253+
</div>
252254
);
253255
}
254256

0 commit comments

Comments
 (0)