auth-11

1"use client";
2 
3import { ArrowLeft, MailIcon } from "lucide-react";
4import type React from "react";
5import { useRef, useState } from "react";
6import { Button } from "@/components/ui/button";
7import { Input } from "@/components/ui/input";
8 
9const DIGIT_REGEX = /^\d*$/;
10const OTP_FIELDS = [0, 1, 2, 3, 4, 5];
11 
12export function OtpForm() {
13  const [otp, setOtp] = useState(["", "", "", "", "", ""]);
14  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
15 
16  const handleChange = (index: number, value: string) => {
17    let newValue = value;
18    if (newValue.length > 1) {
19      newValue = newValue.slice(-1);
20    }
21    if (!DIGIT_REGEX.test(newValue)) {
22      return;
23    }
24 
25    const newOtp = [...otp];
26    newOtp[index] = newValue;
27    setOtp(newOtp);
28 
29    // Move to next input if value is entered
30    if (newValue && index < 5) {
31      inputRefs.current[index + 1]?.focus();
32    }
33  };
34 
35  const handleKeyDown = (
36    index: number,
37    e: React.KeyboardEvent<HTMLInputElement>
38  ) => {
39    if (e.key === "Backspace" && !otp[index] && index > 0) {
40      inputRefs.current[index - 1]?.focus();
41    }
42  };
43 
44  return (
45    <div className="flex h-screen w-full items-center justify-center bg-background px-6 py-12">
46      <div className="w-full max-w-[440px] space-y-12 text-center">
47        <div className="flex flex-col items-center space-y-8">
48          <div className="relative">
49            <div className="flex size-20 items-center justify-center rounded-[2.5rem] bg-primary/5 text-primary shadow-sm ring-1 ring-primary/10 transition-transform duration-500 hover:scale-105">
50              <MailIcon className="size-10" />
51            </div>
52            <div className="-right-1 -top-1 absolute flex size-6 items-center justify-center rounded-full border-4 border-background bg-primary shadow-lg shadow-primary/20">
53              <span className="size-1.5 animate-pulse rounded-full bg-white" />
54            </div>
55          </div>
56 
57          <div className="space-y-4">
58            <h1 className="font-bold text-4xl tracking-tightest sm:text-5xl">
59              Verify email
60            </h1>
61            <p className="mx-auto max-w-sm font-medium text-lg text-muted-foreground leading-relaxed">
62              We've sent a 6-digit verification code to
63              <span className="mt-1 block font-bold text-foreground">
64                v***k@example.com
65              </span>
66            </p>
67          </div>
68        </div>
69 
70        <div className="space-y-10">
71// … truncated