import * as React from "react"; import { Globe, Server, Webhook } from "lucide-react"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { DocsNavVersionedApiSidebarTwo } from "@/registry/docs-nav-versioned-api-sidebar-two/docs-nav-versioned-api-sidebar-two"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof DocsNavVersionedApiSidebarTwo >; const versions: ComponentProps["versions"] = [ { id: "2024-10", label: "2024-10 (Stable)", description: "Latest stable release with production SLAs", releaseTag: "stable", }, { id: "2024-12", label: "2024-12 (Beta)", description: "Preview of predictive scoring endpoints", releaseTag: "beta", }, { id: "2023-08", label: "2023-08 (Legacy)", description: "Long-term support until March 2025", releaseTag: "legacy", isDeprecated: true, }, ]; const protocols: ComponentProps["protocols"] = [ { id: "rest", label: "REST", description: "HTTP+JSON endpoints", icon: , }, { id: "graphql", label: "GraphQL", description: "Single endpoint with typed schema", icon: , }, { id: "webhooks", label: "Webhooks", description: "Event driven callbacks", icon: , }, ]; const groups: ComponentProps["groups"] = [ { id: "accounts", label: "Accounts", description: "Manage customers, profiles, and permissions", protocolId: "rest", endpoints: [ { id: "list-accounts", title: "List accounts", method: "GET", path: "/v1/accounts", description: "Fetch paginated accounts with filtering and ordering support.", latency: { label: "110 ms p95", ms: 110, state: "healthy" }, badges: [{ label: "Supports cache" }], }, { id: "create-account", title: "Create account", method: "POST", path: "/v1/accounts", description: "Provision a new account with optional workspace seeding.", badges: [{ label: "Idempotent" }, { label: "Async" }], }, { id: "suspend-account", title: "Suspend account", method: "POST", path: "/v1/accounts/{accountId}/suspend", description: "Soft suspend an account while preserving audit visibility.", latency: { label: "220 ms p95", ms: 220, state: "warning" }, badges: [{ label: "Requires admin" }], }, ], }, { id: "events", label: "Events", description: "Emit structured activity into the timeline", protocolId: "rest", endpoints: [ { id: "append-event", title: "Append timeline event", method: "POST", path: "/v1/events", description: "Send structured telemetry or business events.", badges: [{ label: "Streaming" }], beta: true, }, { id: "list-event-types", title: "List event types", method: "GET", path: "/v1/events/types", description: "Describe allowed event schemas and retention policies.", }, ], }, { id: "graphql", label: "GraphQL schema", description: "Composable read/write operations", protocolId: "graphql", endpoints: [ { id: "query-account", title: "Account query", method: "POST", path: "graphql", description: "Query accounts, subscriptions, and usage with strongly typed fragments.", badges: [{ label: "Playground" }], }, { id: "mutation-invite", title: "Invite teammate", method: "POST", path: "graphql", description: "Mutation for inviting users and setting roles in a single request.", }, ], }, { id: "webhooks", label: "Webhook events", description: "Deliver change events to your infrastructure", protocolId: "webhooks", endpoints: [ { id: "order-paid", title: "order.paid", method: "POST", path: "webhook", description: "Sent when an order transitions into paid state.", latency: { label: "Delivered in <2s", ms: 2000, state: "healthy" }, badges: [{ label: "Retry" }, { label: "Signature" }], }, { id: "subscription-renewal", title: "subscription.renewal_due", method: "POST", path: "webhook", description: "Raised when a subscription enters renewal period.", badges: [{ label: "Beta" }], beta: true, }, ], }, ]; const environments: ComponentProps["environments"] = [ { label: "Production" }, { label: "Sandbox", variant: "outline" }, ]; export function DocsNavVersionedApiSidebarTwoDemo() { const [version, setVersion] = React.useState(versions[0]?.id); const [protocol, setProtocol] = React.useState(protocols[0]?.id); const [activeEndpointId, setActiveEndpointId] = React.useState("list-accounts"); return ( setActiveEndpointId(endpoint.id)} >

Nextbase API

Versioned navigation for multi-surface APIs

Switch between REST, GraphQL, and webhook surfaces while holding onto version context. Endpoint rows expose method chips, latency tooltips, badges, and deprecated/beta states in one compact layout.

Version {version} Protocol {protocol?.toUpperCase()}

Active endpoint: {activeEndpointId}

Selecting endpoints in the sidebar updates this callout. You can hydrate the content area with code samples, latency dashboards, or SDK usage to accompany the navigation shell.

Deep links preserved Pair the component with query params to hydrate the same endpoint and version when sharing links with teammates.

Recommended integrations

Use badges to call out idempotent operations, streaming support, or signature requirements so developers know what to expect at a glance.

); } export default DocsNavVersionedApiSidebarTwoDemo;

Simple