import { Bot, CreditCard, Fingerprint, Folders, LifeBuoy, MonitorSmartphone, UserRoundPlus, } from "lucide-react"; import { FaqSaasCommandPaletteTwo } from "@/registry/faq-saas-command-palette-two/faq-saas-command-palette-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 FaqSaasCommandPaletteTwo >; type FaqSaasCommandItemData = ComponentProps["hero"]["commandItems"][number]; type FaqSaasQuickTask = ComponentProps["quickTasks"][number]; type FaqSaasAnswerItem = ComponentProps["answers"][number]; type FaqSaasAnswerBlock = FaqSaasAnswerItem["content"][number]; const commandItems: FaqSaasCommandItemData[] = [ { id: "reset-password", label: "Reset password", value: "reset password", description: "Trigger a secure reset email and enforce MFA", keywords: ["login", "password", "auth"], group: "Account", icon: , href: "#", }, { id: "billing-update", label: "Update billing owner", value: "billing owner", description: "Transfer invoices to finance or procurement", keywords: ["billing", "invoice", "payments"], group: "Billing", icon: , href: "#", }, { id: "invite-teammates", label: "Invite teammates", value: "invite teammates", description: "Bulk import users from CSV or your directory", keywords: ["invite", "users", "team"], group: "Workspace setup", icon: , }, { id: "export-data", label: "Export workspace data", value: "export data", description: "Generate GDPR-compliant exports with audit trail", keywords: ["export", "compliance", "data"], group: "Compliance", icon: , }, { id: "automations", label: "Review automation limits", value: "automation limits", description: "Check concurrency caps and usage alerts", keywords: ["automation", "limits", "usage"], group: "Platform", icon: , }, ]; const quickTasks: FaqSaasQuickTask[] = [ { id: "reset-password", title: "Reset a user's password", description: "Send a secure reset email that expires in 15 minutes.", helper: "Admins can trigger resets and enforce SSO re-authentication in one flow.", icon: , action: { label: "Open reset flow", href: "#", }, secondaryAction: { label: "View audit log", href: "#", variant: "ghost", }, }, { id: "invite", title: "Bulk invite teammates", description: "Pull from HRIS, CSV, or Google directory in under two minutes.", helper: "Auto-tag roles and routes approvals to the correct approver chain.", icon: , action: { label: "Launch import", href: "#", }, }, { id: "integrate", title: "Connect Salesforce sandbox", description: "Mirror your production objects to test automations safely.", helper: "Sandbox syncs every 30 minutes and respects field-level security.", icon: , action: { label: "Open integration setup", href: "#", }, }, ]; const answers: FaqSaasAnswerItem[] = [ { id: "reset-password", question: "How do I reset a teammate's password without exposing the link?", summary: "Use the admin console to trigger a time-boxed reset and optionally enforce SSO re-entry.", updatedAt: "Sept 21, 2025", icon: , tags: [{ label: "Security" }, { label: "Updated" }], content: [ paragraph( "Navigate to Workspace → People → Security. Select the teammate, choose “Force reset,” and confirm the MFA enforcement toggle.", ), list([ "Reset links expire in 15 minutes and cannot be reused.", "The user receives an email and in-app banner with guidance.", "Audit trail captures the admin, timestamp, and request origin.", ]), shortcut("Keyboard shortcut", ["G", "→", "S"]), ], actions: [ { label: "Launch admin console", href: "#", }, { label: "Review security policy", href: "#", subtle: true, }, ], }, { id: "billing-update", question: "How do I transfer billing ownership to finance?", summary: "Hand off invoices to a finance admin without interrupting auto-pay or negotiated discounts.", icon: , content: [ paragraph( "Go to Billing → Settings → Ownership. Search for the teammate, confirm their finance role, and choose whether invoices should route via email or AP integration.", ), callout( "Heads up", "Finance admins gain access to receipts, spend exports, and dunning notifications immediately.", ), list([ "Choose to backfill past invoices to the new owner.", "Sync ownership changes to NetSuite and QuickBooks automatically.", ]), ], actions: [ { label: "Open billing settings", href: "#", }, { label: "Share finance onboarding guide", href: "#", subtle: true, }, ], }, { id: "export-data", question: "Can I export workspace data for compliance reviews?", summary: "Generate scoped exports with IP-locked download links for auditors.", icon: , tags: [{ label: "Compliance", variant: "secondary" }], content: [ paragraph( "Admins can request exports under Settings → Compliance. Select the data regions, choose JSON or CSV, and optionally encrypt with a customer-managed key.", ), list([ "Exports respect data residency and field-level access.", "Download links expire after 48 hours and require MFA.", "Webhook events alert your SOC channel when exports complete.", ]), code(`curl https://api.nextbase.com/v1/export \\ -H "Authorization: Bearer " \\ -d '{"regions":["eu"],"format":"csv"}'`), ], actions: [ { label: "Generate export", href: "#", }, { label: "Automate via API", href: "#", subtle: true, }, ], }, ]; const supportRail: ComponentProps["supportRail"] = { title: "Need human help?", description: "Our success engineers answer 92% of chats within two minutes.", statusLabel: "Live chat · Online", statusTone: "online" as const, liveMessage: "SLO: < 2 min first response · 24/5 coverage", primaryAction: { label: "Start a live chat", href: "#", }, secondaryAction: { label: "Book office hours", href: "#", variant: "ghost" as const, }, escalations: [ { label: "Open a priority ticket", href: "#" }, { label: "Visit trust center", href: "#" }, ], }; export function FaqSaasCommandPaletteTwoDemo() { return ( ); } function paragraph(content: string): FaqSaasAnswerBlock { return { type: "paragraph", content }; } function list(items: string[], ordered = false): FaqSaasAnswerBlock { return { type: "list", items, ordered }; } function callout(title: string, description: string): FaqSaasAnswerBlock { return { type: "callout", title, description }; } function shortcut(label: string, keys: string[]): FaqSaasAnswerBlock { return { type: "shortcut", label, keys }; } function code(codeBlock: string): FaqSaasAnswerBlock { return { type: "code", code: codeBlock, language: "bash" }; } export default FaqSaasCommandPaletteTwoDemo;

Simple