d-bis/js
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

portal: OpenApiEndpoint card UI tweaks (#8661)

Browse Source
This commit is contained in:
Manan Tank
2026-02-04 17:50:30 -08:00
committed by GitHub
parent 13a46b7ff6
commit 7f36303b0b
5 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/portal/src/app/wallets/get-users/page.mdx
+2
View File
@@ -49,6 +49,8 @@ Required headers:
<OpenApiEndpoint path="/v1/wallets/user" method="GET" />
<br/>
For ecosystem wallets, include the ecosystem headers in your requests.
</TabsContent>
apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx
+14 -11
View File
@@ -130,12 +130,12 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
hasMultipleExamples={true}
/>
) : (
<div className="rounded-lg border">
<div className="rounded-lg border bg-card">
<RequestExample
codeExamples={requestExamples.map((example) => ({
code: (
<CodeBlock
className="rounded-none border-none"
className="rounded-none border-none !bg-card"
code={example.code}
containerClassName="m-0"
lang={example.lang}
@@ -190,16 +190,17 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
>
Response
</Heading>
<div className="overflow-hidden rounded-lg border">
<div className="overflow-hidden rounded-lg border bg-card">
<Tabs className="w-full" defaultValue={responseKeys[0]}>
<TabsList className="w-full">
<TabsList className="w-full pt-1">
{responseKeys.map((status) => (
<TabsTrigger key={status} value={status}>
<div className="flex items-center gap-2 py-1">
<div className="flex items-center gap-1.5 px-0.5">
<span
className={cn("h-2 w-2 rounded-full", {
"bg-green-500": status.startsWith("2"),
"bg-red-500": status.startsWith("4"),
"bg-orange-500": status.startsWith("3"),
"bg-yellow-500": status.startsWith("5"),
})}
/>
@@ -212,7 +213,7 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
{responseKeys.map((status) => (
<TabsContent className="m-0" key={status} value={status}>
<CodeBlock
className="rounded-none border-none"
className="rounded-none border-none !bg-card"
code={responseExamples[status] as string}
containerClassName="m-0"
lang="json"
@@ -237,15 +238,16 @@ function ParameterSection(props: {
summary={
<div className="flex items-center gap-3">
<span className="text-sm font-medium">{props.title}</span>
<span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
<span className="text-xs text-muted-foreground bg-muted size-6 rounded-full inline-flex justify-center items-center">
{props.parameters.length}
</span>
</div>
}
accordionItemClassName="border-0 my-0"
accordionTriggerClassName="p-4 hover:bg-muted/50 transition-colors"
headingClassName="!no-underline"
>
<div className="px-4 pb-4">
<div className="px-4 pb-4 space-y-2">
{props.parameters
.sort((a, b) => {
if (a.required === b.required) {
@@ -266,16 +268,16 @@ function InlineParameterItem({ param }: { param: APIParameter }) {
return (
<div className="flex flex-col gap-2 p-3">
<div className="flex items-center gap-2 flex-wrap">
<code className="text-foreground text-sm font-mono bg-background px-2 py-1 rounded border">
<code className="text-foreground text-base font-mono font-medium">
{param.name}
</code>
{param.type && (
<span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded">
<span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded-lg">
{param.type}
</span>
)}
{param.required && (
<span className="text-xs text-warning-text px-2 py-1 rounded border border-warning-text">
<span className="text-xs text-warning-text px-2 py-1 rounded-lg border border-warning-text/30 bg-warning-text/15">
Required
</span>
)}
@@ -289,6 +291,7 @@ function InlineParameterItem({ param }: { param: APIParameter }) {
<div className="text-sm flex flex-col gap-2">
<span className="text-muted-foreground">Example: </span>
<CodeBlock
className="!bg-card"
code={
typeof param.example === "object"
? JSON.stringify(param.example)
apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx
+9 -8
View File
@@ -29,16 +29,16 @@ function InlineParameterItem({ param }: { param: APIParameter }) {
return (
<div className="flex flex-col gap-2 p-3 rounded-lg">
<div className="flex items-center gap-2 flex-wrap">
<code className="text-foreground text-sm font-mono bg-background px-2 py-1 rounded border">
<code className="text-foreground text-base font-mono font-medium">
{param.name}
</code>
{param.type && (
<span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded">
<span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded-lg">
{param.type}
</span>
)}
{param.required && (
<span className="text-xs text-warning-text px-2 py-1 rounded border border-warning-text">
<span className="text-xs text-warning-text px-2 py-1 rounded-lg border border-warning-text/30 bg-warning-text/15">
Required
</span>
)}
@@ -49,15 +49,15 @@ function InlineParameterItem({ param }: { param: APIParameter }) {
)}
{param.example !== undefined && (
<div className="text-sm flex flex-col gap-2">
<span className="text-muted-foreground">Example: </span>
<div className="text-sm flex flex-col gap-2 my-3">
<span className="text-muted-foreground">Example </span>
<CodeClient
code={
typeof param.example === "object"
? JSON.stringify(param.example)
: String(param.example)
}
className="rounded-none border-none"
className="rounded-lg"
lang="json"
scrollableContainerClassName="m-0"
scrollableClassName="max-h-[200px]"
@@ -78,10 +78,11 @@ function ParameterSection(props: {
<div className="border-b last:border-b-0">
<Details
key={props.title}
headingClassName="!no-underline"
summary={
<div className="flex items-center gap-3">
<span className="text-sm font-medium">{props.title}</span>
<span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
<span className="text-xs text-muted-foreground bg-muted size-6 rounded-full inline-flex justify-center items-center">
{props.parameters.length}
</span>
</div>
@@ -138,7 +139,7 @@ export function DynamicRequestExample(props: DynamicRequestExampleProps) {
return (
<QueryClientProvider client={queryClient}>
<div className="rounded-lg border">
<div className="rounded-lg border bg-card">
<RequestExample
codeExamples={props.requestExamples.map((example) => ({
code: (
apps/portal/src/components/Document/APIEndpointMeta/OpenApiEndpoint.tsx
+3 -4
View File
@@ -1,3 +1,4 @@
import { Spinner } from "@workspace/ui/components/spinner";
import type { OpenAPIV3_1 } from "openapi-types";
import { cache, Suspense } from "react";
import {
@@ -455,10 +456,8 @@ function transformOpenApiToApiEndpointMeta(
function LoadingFallback() {
return (
<div className="flex items-center justify-center p-8">
<div className="text-sm text-muted-foreground">
Loading API documentation...
</div>
<div className="flex items-center justify-center p-8 border rounded-lg min-h-[300px] bg-card">
<Spinner className="size-8 text-muted-foreground" />
</div>
);
}
apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx
+3 -3
View File
@@ -109,7 +109,7 @@ export function RequestExample(props: {
}}
value={selectedFormat}
>
<SelectTrigger className="w-[130px] rounded-full bg-card">
<SelectTrigger className="w-[130px] rounded-xl bg-card ">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-background rounded-xl">
@@ -144,7 +144,7 @@ export function RequestExample(props: {
}}
value={selectedExampleType}
>
<SelectTrigger className="w-[130px] rounded-full bg-card">
<SelectTrigger className="md:w-[250px] rounded-xl bg-card text-left">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-background rounded-xl">
@@ -169,7 +169,7 @@ export function RequestExample(props: {
}}
value={selectedExample?.label}
>
<SelectTrigger className="w-[130px] rounded-full bg-card">
<SelectTrigger className="w-[150px] rounded-xl bg-card">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-background rounded-xl">