import * as React from "react"; import { Blocks, Braces, Brackets, Cable, Database, GitBranch, KeyRound, } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Typography } from "@/components/ui/Typography"; const { Small: TypographySmall, Large: TypographyLarge } = Typography; import { SidebarAppShellDeveloperPlatformNestedNavigationThree } from "@/registry/sidebar-app-shell-developer-platform-nested-navigation-three/sidebar-app-shell-developer-platform-nested-navigation-three"; 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 SidebarAppShellDeveloperPlatformNestedNavigationThree >; type SidebarAppShellDeveloperPlatformNestedNavigationThreeEnvironment = NonNullable[number]; type SidebarAppShellDeveloperPlatformNestedNavigationThreeGroup = NonNullable< ComponentProps["navigationGroups"] >[number]; type SidebarAppShellDeveloperPlatformNestedNavigationThreeLanguageTab = NonNullable[number]; type SidebarAppShellDeveloperPlatformNestedNavigationThreeCommandItem = NonNullable[number]; const environments: SidebarAppShellDeveloperPlatformNestedNavigationThreeEnvironment[] = [ { id: "production", label: "Production", description: "Live traffic • high-compliance", badge: "Protected", badgeVariant: "destructive", toneClass: "border border-destructive/40", requiresConfirmation: true, }, { id: "staging", label: "Staging", description: "Pre-release validations", badge: "QA", badgeVariant: "secondary", }, { id: "sandbox", label: "Sandbox", description: "Personal experiments", }, ]; const navigationGroups: SidebarAppShellDeveloperPlatformNestedNavigationThreeGroup[] = [ { id: "apis", label: "APIs", icon: , defaultOpen: true, items: [ { id: "events", label: "Events API", description: "Stream product analytics events", isActive: true, children: [ { id: "events-overview", label: "Overview" }, { id: "events-auth", label: "Authentication" }, { id: "events-webhooks", label: "Webhooks", badge: "Updated" }, ], }, { id: "tokens", label: "Tokens API", isBeta: true, children: [ { id: "tokens-issue", label: "Issue tokens" }, { id: "tokens-rotate", label: "Rotate" }, ], }, ], }, { id: "sdks", label: "SDKs", icon: , items: [ { id: "sdk-node", label: "Node.js", children: [ { id: "sdk-node-install", label: "Install" }, { id: "sdk-node-track", label: "Track events" }, ], }, { id: "sdk-python", label: "Python", children: [ { id: "sdk-python-auth", label: "Authentication" }, { id: "sdk-python-async", label: "Async helpers" }, ], }, ], }, { id: "webhooks", label: "Webhooks", icon: , items: [ { id: "webhooks-sec", label: "Security", children: [ { id: "webhooks-signatures", label: "Signature validation" }, { id: "webhooks-retries", label: "Retries" }, ], }, ], }, ]; const commandItems: SidebarAppShellDeveloperPlatformNestedNavigationThreeCommandItem[] = [ { id: "cmd-tokens", title: "Go to Tokens API", description: "Manage service tokens and rotation", icon: , shortcut: "T", }, { id: "cmd-events", title: "Search events reference", description: "Endpoints, parameters, and examples", icon: , shortcut: "E", }, { id: "cmd-changelog", group: "Resources", title: "View changelog", description: "Latest platform updates", icon: , }, ]; const languageTabs: SidebarAppShellDeveloperPlatformNestedNavigationThreeLanguageTab[] = [ { id: "node", label: "Node", code: `import { Webhook } from "@nextbase/sdk"; const webhook = new Webhook({ secret: process.env.NEXTBASE_SECRET! }); app.post("/webhooks", async (req, res) => { const event = webhook.verify(req.body, req.headers); if (event.type === "workspace.provisioned") { await syncWorkspace(event.data.id); } res.status(204).end(); });`, }, { id: "python", label: "Python", code: `from nextbase import Webhook webhook = Webhook(secret=os.environ["NEXTBASE_SECRET"]) @app.post("/webhooks") def handle_webhook(request): event = webhook.verify(request.body, request.headers) if event.type == "workspace.provisioned": provision_workspace(event.data["id"]) return Response(status_code=204)`, }, { id: "go", label: "Go", code: `handler := webhook.NewHandler(os.Getenv("NEXTBASE_SECRET")) http.HandleFunc("/webhooks", func(w http.ResponseWriter, r *http.Request) { event, err := handler.Verify(r.Context(), r.Body, r.Header) if err != nil { log.Printf("signature validation failed: %v", err) w.WriteHeader(http.StatusUnauthorized) return } switch event.Type { case "workspace.provisioned": syncWorkspace(event.Data.ID) } w.WriteHeader(http.StatusNoContent) })`, }, ]; export function SidebarAppShellDeveloperPlatformNestedNavigationThreeDemo() { const [environment, setEnvironment] = React.useState(environments[2]); return ( , }, { id: "open-cli", label: "Open CLI", icon: , variant: "outline", }, ]} documentationCards={[ { id: "migration", title: "v3 API migration guide", description: "Step-by-step upgrade path from webhooks v2.", href: "#", }, { id: "policy", title: "Security posture", description: "Understand how we isolate environments and rotate secrets.", href: "#", }, ]} statusBadge={{ label: "All systems operational", variant: "secondary" }} codeToolbarTitle="Webhook signature verification" >

Event payload anatomy Understand top-level keys and nested resources.

Schema 2024-10-18

); } export interface PayloadFieldProps { name: string; description: string; sample: string; } function PayloadField({ name, description, sample }: PayloadFieldProps) { return (

{name} {sample} {description}

); } export default SidebarAppShellDeveloperPlatformNestedNavigationThreeDemo;

Simple