OTP Code Dialog

1"use client";
2 
3import { useEffect, useRef, useState, type FormEvent } from "react";
4import { OTPInput, type SlotProps } from "input-otp";
5 
6import { Button } from "@/components/ui/button";
7import {
8  ResponsiveDialog,
9  ResponsiveDialogClose,
10  ResponsiveDialogContent,
11  ResponsiveDialogDescription,
12  ResponsiveDialogHeader,
13  ResponsiveDialogTitle,
14  ResponsiveDialogTrigger,
15} from "@/components/ui/revola";
16import { cn } from "@/lib/utils";
17 
18const CORRECT_CODE = "6996";
19 
20export default function OtpCodeDialog() {
21  const [value, setValue] = useState("");
22  const [hasGuessed, setHasGuessed] = useState<undefined | boolean>(undefined);
23  const inputRef = useRef<HTMLInputElement>(null);
24  const closeButtonRef = useRef<HTMLButtonElement>(null);
25 
26  useEffect(() => {
27    if (hasGuessed) {
28      closeButtonRef.current?.focus();
29    }
30  }, [hasGuessed]);
31 
32  async function onSubmit(e?: FormEvent<HTMLFormElement>) {
33    e?.preventDefault?.();
34 
35    inputRef.current?.select();
36    await new Promise((r) => setTimeout(r, 1_00));
37 
38    setHasGuessed(value === CORRECT_CODE);
39 
40    setValue("");
41    setTimeout(() => {
42      inputRef.current?.blur();
43    }, 20);
44  }
45 
46  return (
47    <ResponsiveDialog>
48      <ResponsiveDialogTrigger asChild>
49        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
50          Verify OTP
51        </Button>
52      </ResponsiveDialogTrigger>
53      <ResponsiveDialogContent className="mx-auto sm:max-w-[400px]">
54        <div className="space-y-4 p-4 pb-6 sm:p-6">
55          <div className="flex flex-col items-center gap-2">
56            <div className="flex size-11 shrink-0 items-center justify-center rounded-full border" aria-hidden="true">
57              <svg
58                className="stroke-zinc-800 dark:stroke-zinc-100"
59                xmlns="http://www.w3.org/2000/svg"
60                width="20"
61                height="20"
62                viewBox="0 0 32 32"
63                aria-hidden="true"
64              >
65                <circle cx="16" cy="16" r="12" fill="none" strokeWidth="8" />
66              </svg>
67            </div>
68            <ResponsiveDialogHeader className="sm:text-center">
69              <ResponsiveDialogTitle>{hasGuessed ? "Code verified!" : "Enter confirmation code"}</ResponsiveDialogTitle>
70              <ResponsiveDialogDescription className="text-balance">
71                {hasGuessed
72                  ? "Your code has been successfully verified."
73// … truncated