import * as React from "react"; import { Button } from "@/components/ui/button"; import { ModalDialogMarketingLeadCaptureSpotlightOne } from "@/registry/modal-dialog-marketing-lead-capture-spotlight-one/modal-dialog-marketing-lead-capture-spotlight-one"; 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 ModalDialogMarketingLeadCaptureSpotlightOne >; type ModalDialogMarketingLeadCaptureSpotlightOneValues = Parameters< NonNullable >[0]; const heroAsset = { src: "https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?auto=format&fit=crop&w=1200&q=80", alt: "Team collaborating on a marketing strategy with analytics dashboards", caption: "Top-performing lifecycle campaign dashboard with segment insights", }; export function ModalDialogMarketingLeadCaptureSpotlightOneDemo() { const [open, setOpen] = React.useState(false); const [lastSubmission, setLastSubmission] = React.useState< ModalDialogMarketingLeadCaptureSpotlightOneValues | undefined >(); return (

Spotlight modal lead capture

Trigger the modal to experience desktop and mobile treatments. Form submissions resolve with simulated latency.

{lastSubmission ? (

Last submission — {lastSubmission.fullName} ({lastSubmission.email})

) : null}

{ await new Promise((resolve) => setTimeout(resolve, 1200)); setLastSubmission(values); }} />

); } export default ModalDialogMarketingLeadCaptureSpotlightOneDemo;

Simple