Step up dialog

"use client"

import * as React from "react"
import { StepUpDialog } from "@/components/candor/step-up-dialog"
import { Button } from "@/components/candor/ui/button"

export default function Example() {
  const [open, setOpen] = React.useState(false)
  const [busy, setBusy] = React.useState(false)
  const [error, setError] = React.useState<string>()
  const [passed, setPassed] = React.useState(false)
  const wait = () => new Promise((r) => setTimeout(r, 600))
  // The app runs each check, says why one failed, and closes the dialog when one passes (and records stepup.completed).
  const pass = () => {
    setOpen(false)
    setPassed(true)
  }
  return (
    <div className="flex flex-col items-start gap-2 text-sm">
      <Button variant="destructive" onClick={() => (setError(undefined), setOpen(true))}>
        Delete the production environment
      </Button>
      {passed && <p className="text-muted-foreground">Checked. The demo would delete it now.</p>}
      <StepUpDialog
        open={open}
        onOpenChange={setOpen}
        action="delete the production environment"
        account="sam@keel.dev"
        grantFor="10 minutes"
        codeHint="Enter the 6-digit code from your authenticator app. Try 123456."
        busy={busy}
        error={error}
        onPasskey={async () => {
          setBusy(true)
          await wait()
          setBusy(false)
          setError("This device has no passkey for sam@keel.dev. Use a code instead.")
        }}
        onVerifyCode={async (code) => {
          setBusy(true)
          await wait()
          setBusy(false)
          if (code === "123456") pass()
          else setError("That code doesn’t match. Codes change every 30 seconds.")
        }}
      />
    </div>
  )
}