import * as React from "react"; import { ArrowRightIcon, ClipboardCheckIcon, DownloadIcon, LinkIcon, Share2Icon, SparklesIcon, } from "lucide-react"; import { ResourceLibraryPersonaSegmentedSaasVaultTwo } from "@/registry/resource-library-persona-segmented-saas-vault-two/resource-library-persona-segmented-saas-vault-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 ResourceLibraryPersonaSegmentedSaasVaultTwo >; type PersonaResourceItem = NonNullable[number]; const personas = [ { id: "admin", label: "Workspace admin", description: "Configures integrations, permissions, and billing controls.", badge: "Core", }, { id: "revops", label: "Revenue operations", description: "Owns pipeline hygiene and GTM automation.", badge: "Priority", }, { id: "finance", label: "Finance partner", description: "Monitors ROI, contract terms, and forecasting.", }, ]; const lifecycleStages = [ { id: "onboarding", label: "Onboarding", description: "First 30 days of activation across teams.", }, { id: "adoption", label: "Adoption", description: "Rolling out advanced workflows and automations.", }, { id: "expansion", label: "Expansion", description: "Driving multi-team usage and reporting outcomes.", }, ]; const featuredResources: PersonaResourceItem[] = [ { id: "persona-dashboard", title: "Persona dashboard launch kit", description: "Segment dashboards, alert recipes, and integrations to onboard admins, RevOps, and finance with a unified command center.", personas: ["admin", "revops", "finance"], personaLabels: ["Workspace admin", "Revenue operations", "Finance partner"], stageId: "onboarding", stageLabel: "Onboarding", formatLabel: "Playbook", mediaType: "guide", requiresLogin: true, durationLabel: "Launch timeline: 10 days", updatedAtLabel: "Oct 2025", tags: [ { id: "template", label: "Template" }, { id: "integrations", label: "Integrations", variant: "secondary" }, ], highlights: [ { id: "views", label: "Workspace views", value: "6 curated" }, { id: "alerts", label: "Lifecycle alerts", value: "14 automations" }, { id: "roi", label: "Time saved", value: "22 hrs / week" }, ], coverImage: { src: "https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?auto=format&fit=crop&w=1200&q=80", alt: "Dashboard with analytics widgets", aspectRatio: 16 / 9, }, quickActions: [ { id: "share", label: "Share", icon: , onSelect: () => console.log("share persona kit"), }, { id: "copy", label: "Copy link", icon: , onSelect: () => console.log("copy link"), }, ], link: { label: "Launch dashboard kit", href: "#persona-dashboard", icon: , }, secondaryLink: { label: "Preview", href: "#persona-dashboard-preview", icon: , }, }, { id: "revops-cadence", title: "RevOps cadence blueprint", description: "Weekly operating rhythm with agenda templates, stakeholder briefs, and KPI rollups for revenue operations leaders.", personas: ["revops"], personaLabels: ["Revenue operations"], stageId: "adoption", stageLabel: "Adoption", formatLabel: "Operating cadence", mediaType: "guide", requiresLogin: true, durationLabel: "Runtime: 45 minutes", updatedAtLabel: "Sep 2025", tags: [ { id: "notion", label: "Notion" }, { id: "sheets", label: "Sheets", variant: "outline" }, ], highlights: [ { id: "agendas", label: "Agendas", value: "8 weekly" }, { id: "stakeholders", label: "Stakeholders", value: "5 personas" }, { id: "automation", label: "Automation", value: "9 workflows" }, ], coverImage: { src: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80", alt: "Team collaborating during a meeting", aspectRatio: 16 / 9, }, quickActions: [ { id: "download", label: "Download files", icon: , onSelect: () => console.log("download assets"), }, ], link: { label: "Open cadence toolkit", href: "#revops-cadence", icon: , }, }, ]; const resources: PersonaResourceItem[] = [ { id: "admin-security", title: "Admin security checklist", description: "Step-by-step checklist covering SSO rollout, SCIM provisioning, and audit logging for enterprise admins.", personas: ["admin"], personaLabels: ["Workspace admin"], stageId: "onboarding", stageLabel: "Onboarding", formatLabel: "Checklist", mediaType: "guide", requiresLogin: false, durationLabel: "12 tasks", updatedAtLabel: "2 weeks ago", tags: [ { id: "security", label: "Security", variant: "secondary" }, { id: "compliance", label: "Compliance" }, ], link: { label: "Download checklist", href: "#admin-security", icon: , }, secondaryLink: { label: "Preview", href: "#admin-security-preview", }, quickActions: [ { id: "share", label: "Share", icon: , onSelect: () => console.log("share security checklist"), }, ], }, { id: "revops-automation-webinar", title: "Automation architecture webinar", description: "On-demand session demoing revenue automation plays with live build scripts and sandbox environment.", personas: ["revops"], personaLabels: ["Revenue operations"], stageId: "adoption", stageLabel: "Adoption", formatLabel: "Webinar", mediaType: "video", requiresLogin: false, durationLabel: "Duration: 54 minutes", updatedAtLabel: "Last month", tags: [ { id: "automation", label: "Automation" }, { id: "playbooks", label: "Playbooks", variant: "outline" }, ], link: { label: "Watch replay", href: "#revops-automation-webinar", icon: , }, secondaryLink: { label: "Download deck", href: "#revops-automation-deck", icon: , }, quickActions: [ { id: "share", label: "Share", icon: }, { id: "copy", label: "Copy link", icon: }, ], coverImage: { src: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1200&q=80", alt: "Webinar presentation", }, }, { id: "finance-roi-model", title: "Finance ROI scenario model", description: "Interactive ROI calculator with adoption levers, scenario toggles, and board-ready outputs for finance teams.", personas: ["finance"], personaLabels: ["Finance partner"], stageId: "expansion", stageLabel: "Expansion", formatLabel: "Calculator", mediaType: "guide", requiresLogin: true, durationLabel: "Model depth: 5 tabs", updatedAtLabel: "Aug 2025", tags: [ { id: "roi", label: "ROI" }, { id: "board", label: "Board", variant: "secondary" }, ], link: { label: "Open ROI model", href: "#finance-roi-model", icon: , }, quickActions: [ { id: "share", label: "Share", icon: , onSelect: () => console.log("share roi"), }, { id: "copy", label: "Copy link", icon: , onSelect: () => console.log("copy roi"), }, ], }, { id: "revops-certification", title: "Certification enablement bundle", description: "Enablement bundle with scenarios, rubrics, and recorded panel to help RevOps teams pass partner certification.", personas: ["revops", "admin"], personaLabels: ["Revenue operations", "Workspace admin"], stageId: "expansion", stageLabel: "Expansion", formatLabel: "Enablement", mediaType: "guide", requiresLogin: true, durationLabel: "Bundle: 9 files", updatedAtLabel: "July 2025", tags: [ { id: "certification", label: "Certification" }, { id: "enablement", label: "Enablement", variant: "secondary" }, ], link: { label: "Download bundle", href: "#revops-certification", icon: , }, secondaryLink: { label: "Preview", href: "#revops-certification-preview", }, quickActions: [ { id: "share", label: "Share", icon: }, ], }, ]; const savedViewChips = [ { id: "revops", label: "RevOps onboarding", description: "Filters: RevOps + onboarding", }, { id: "finance-quarterly", label: "Finance QBR", description: "Finance + expansion", }, ]; type FiltersValue = NonNullable extends ( filters: infer T, ) => void ? T : never; export function ResourceLibraryPersonaSegmentedSaasVaultTwoDemo() { const [filters, setFilters] = React.useState({ personaIds: [], stageId: null as string | null, videoOnly: false, requiresLogin: false, }); return (

console.log("save view", next)} />

        {JSON.stringify(filters, null, 2)}

); } export default ResourceLibraryPersonaSegmentedSaasVaultTwoDemo;

Simple