import * as React from "react"; import { PaginationControlsFunnelStageWizardSix } from "@/registry/pagination-controls-funnel-stage-wizard-six/pagination-controls-funnel-stage-wizard-six"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; 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 PaginationControlsFunnelStageWizardSix >; type FunnelWizardStage = NonNullable[number]; const baseStages: FunnelWizardStage[] = [ { id: "company", title: "Company details", description: "Tell us about your organisation so we can personalise pricing and agreements.", summary: "Company profile", content: ( <>

Legal business name

Team size

Implementation notes

</div>
      </>
    ),
  },
  {
    id: "billing",
    title: "Billing preferences",
    description: "Configure invoicing, payment cadence, and tax profile.",
    summary: "Billing",
    content: (
      <>
        <div className="space-y-2">
          <label className="text-sm font-medium" htmlFor="billing-email">
            Billing email
          </label>
          <Input
            id="billing-email"
            type="email"
            placeholder="billing@acme.com"
          />
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium" htmlFor="payment-term">
            Payment terms
          </label>
          <Select defaultValue="net-30">
            <SelectTrigger id="payment-term">
              <SelectValue placeholder="Select terms" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="net-15">Net 15</SelectItem>
              <SelectItem value="net-30">Net 30</SelectItem>
              <SelectItem value="net-45">Net 45</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-2 lg:col-span-2">
          <label className="text-sm font-medium" htmlFor="billing-address">
            Billing address
          </label>
          <Textarea
            id="billing-address"
            placeholder="Street, City, Region, Postal code"
            rows={3}
          />
        </div>
      </>
    ),
  },
  {
    id: "review",
    title: "Review & invite",
    description: "Confirm details, invite teammates, and submit the agreement.",
    summary: "Review",
    content: (
      <>
        <div className="space-y-2">
          <label className="text-sm font-medium" htmlFor="review-summary">
            Summary for approvers
          </label>
          <Textarea
            id="review-summary"
            placeholder="Highlight compliance requirements or special terms."
            rows={4}
          />
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium" htmlFor="invite-email">
            Invite teammate (optional)
          </label>
          <Input id="invite-email" type="email" placeholder="ally@acme.com" />
        </div>
      </>
    ),
  },
];

export function PaginationControlsFunnelStageWizardSixDemo() {
  const [stageId, setStageId] = React.useState("company");
  const [validation, setValidation] = React.useState<string | undefined>();

return (
    <PaginationControlsFunnelStageWizardSix
      stages={baseStages}
      currentStageId={stageId}
      onStageChange={(stage) => {
        setStageId(stage.id);
        setValidation(undefined);
      }}
      onSubmit={(stage) => {
        setValidation("Please confirm customer approval before submitting.");
        window.alert(`Submitted stage: ${stage.title}`);
      }}
      saveAndExitCta={{
        label: "Save & exit",
        variant: "outline",
        onClick: () => window.alert("Progress saved"),
      }}
      validationMessage={validation}
      className="rounded-3xl border border-border/60 bg-background/70 p-6 shadow-[0_36px_120px_-70px_rgba(15,23,42,0.6)]"
    />
  );
}

export default PaginationControlsFunnelStageWizardSixDemo;

</article></body></html>

Simple