Verify email

"use client";
import * as React from "react";
import { CircleCheck } from "lucide-react";
import { VerifyEmailStrip } from "@/components/ui/notchset/blocks/verify-email";
import { Button } from "@/components/ui/notchset/button";

/* Any six digits confirm it, except 000000, which shows how a wrong code reads. */
export default function VerifyEmailDemo() {
  const [done, setDone] = React.useState(false);
  if (done)
    return (
      <div className="flex w-full flex-wrap items-center justify-between gap-3 rounded-[var(--ns-radius-lg)] bg-[var(--ns-well)] px-4 py-3.5 shadow-[inset_0_0_0_1px_var(--ns-line-soft)]">
        <span className="flex items-center gap-2 text-[var(--ns-ink)]">
          <CircleCheck aria-hidden className="size-4 text-[var(--ns-ok)]" />
          maya@notchset.com is confirmed
        </span>
        <Button size="sm" variant="ghost" onClick={() => setDone(false)}>
          Show it again
        </Button>
      </div>
    );
  return (
    <VerifyEmailStrip
      className="w-full"
      email="maya@notchset.com"
      onVerify={async (code) => {
        await new Promise((r) => setTimeout(r, 400));
        if (code === "000000") throw new Error("That code didn’t match. Check the newest email, or send a new code.");
        setDone(true);
      }}
      onResend={() => undefined}
      onChangeEmail={() => undefined}
      note="Any 6 digits confirm it here; 000000 shows a wrong code."
    />
  );
}