import * as React from "react"; import { Building, CreditCard, Sparkles } from "lucide-react"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { DocsNavRoleBasedQuickActionsThree } from "@/registry/docs-nav-role-based-quick-actions-three/docs-nav-role-based-quick-actions-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 DocsNavRoleBasedQuickActionsThree >; const roles: ComponentProps["roles"] = [ { id: "developer", label: "Developer", description: "Build and automate", completionPercent: 62, highlight: "Invite a teammate to unlock shared environments and deployment approvals.", quickActions: [ { id: "create-token", label: "Create API token", description: "Issue a scoped token for CLI and CI usage.", href: "https://usenextbase.com/api-tokens", icon: , }, { id: "install-cli", label: "Install CLI", description: "Download binary or install via npm for scripted workflows.", href: "https://usenextbase.com/cli", }, ], sections: [ { id: "dev-onboarding", title: "Onboarding", description: "Spin up a sandbox, connect git, and ship your first integration.", topics: [ { id: "create-workspace", title: "Create a sandbox workspace", href: "#sandbox-workspace", description: "Provision an isolated environment with seeded sample data.", status: "in-progress", estimatedMinutes: 8, badge: { label: "Guided" }, }, { id: "deploy-blueprint", title: "Deploy starter blueprint", href: "#starter-blueprint", description: "Walkthrough for the starter pipeline blueprint.", status: "complete", estimatedMinutes: 12, badge: { label: "Video", variant: "outline" }, }, ], }, { id: "dev-automation", title: "Automation", description: "Trigger flows with events, schedules, and infrastructure hooks.", topics: [ { id: "webhook-handoff", title: "Harden webhook handoffs", href: "https://usenextbase.com/docs/webhooks", description: "Secure, retry, and monitor inbound webhooks.", status: "incomplete", estimatedMinutes: 14, }, ], }, ], }, { id: "admin", label: "Admin", description: "Manage org", completionPercent: 45, highlight: "Finish configuring multi-factor policies before inviting external partners.", quickActions: [ { id: "invite", label: "Invite teammate", href: "https://usenextbase.com/invite", icon: , }, { id: "audit-log", label: "Review audit log", href: "https://usenextbase.com/audit", variant: "outline", }, ], sections: [ { id: "admin-security", title: "Security", description: "Control access, enforce MFA, and monitor policy drift.", topics: [ { id: "configure-mfa", title: "Configure MFA", href: "#configure-mfa", description: "Enforce organization-wide MFA policies.", status: "in-progress", estimatedMinutes: 6, }, { id: "set-sso", title: "Set up SSO", href: "#set-sso", description: "Connect identity provider for centralized access.", status: "incomplete", estimatedMinutes: 10, badge: { label: "SAML" }, }, ], }, ], }, { id: "finance", label: "Finance", description: "Forecast and reconcile", completionPercent: 78, highlight: "Enable revenue alerts to catch anomalies before closing the books.", quickActions: [ { id: "download-report", label: "Download revenue report", href: "https://usenextbase.com/revenue-report", icon: , }, ], sections: [ { id: "finance-analytics", title: "Analytics", description: "Model billing events, revenue schedules, and churn insights.", topics: [ { id: "configure-kpis", title: "Configure KPI dashboards", href: "#configure-kpis", description: "Personalize finance dashboards across regions.", status: "complete", estimatedMinutes: 5, badge: { label: "Template", variant: "outline" }, }, ], }, ], }, ]; export function DocsNavRoleBasedQuickActionsThreeDemo() { const [roleId, setRoleId] = React.useState(roles[0]?.id); const [topicId, setTopicId] = React.useState( "create-workspace", ); return ( setTopicId(topic.id)} >

Persona-based docs

Surface the right playbooks for each role

Switch roles to see curated checklists, quick actions, and progress indicators update instantly. The layout keeps high-frequency workflows pinned while letting teams drill into persona-specific docs.

Sandbox workspace setup

Provision an isolated workspace with seeded data and guardrails. Developers can experiment without impacting production, while admins monitor access through audit trails.

Deploy starter blueprint

Use the starter blueprint to generate sample pipelines, environment variables, and monitoring rules. Completion propagates progress across the developer persona tab.

Configure MFA policies

Enforce organization-wide MFA policies, control session expiration, and sync status back to provisioning systems.

Tip Role progress bars update as teams mark topics complete, reinforcing checklists across personas.

Connect single sign-on

Pair with your identity provider to centralize access and audit logging. Quick actions link directly to configuration pages for faster completion.

Configure KPI dashboards

Finance teams personalize dashboards with revenue cohorts, renewal risk, and forecast accuracy. Links open contextual docs or in-product settings.

); } export default DocsNavRoleBasedQuickActionsThreeDemo;

Simple