otp-2

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
    Field,
    FieldDescription,
    FieldGroup,
    FieldLabel,
} from "@/components/ui/field"
import {
    InputOTP,
    InputOTPGroup,
    InputOTPSeparator,
    InputOTPSlot,
} from "@/components/ui/input-otp"
import Image from "next/image"

export default function OTPForm({ className, ...props }: React.ComponentProps<"div">) {
    return (
        <section>
            <div className="flex min-h-svh w-full">
                <div className="flex w-full items-center justify-center p-6 lg:w-1/2">
                    <div className="w-full max-w-xs">
                        <div className={cn("flex flex-col gap-6", className)} {...props}>
                            <form>
                                <FieldGroup>
                                    <div className="flex flex-col items-center gap-1 text-center">
                                        <h1 className="text-2xl font-bold">Enter verification code</h1>
                                        <p className="text-muted-foreground text-sm text-balance">
                                            We sent a 6-digit code to your email.
                                        </p>
                                    </div>
                                    <Field>
                                        <FieldLabel htmlFor="otp" className="sr-only">
                                            Verification code
                                        </FieldLabel>
                                        <InputOTP maxLength={6} id="otp" required>
                                            <InputOTPGroup className="gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border">
                                                <InputOTPSlot index={0} />
                                                <InputOTPSlot index={1} />
                                            </InputOTPGroup>
                                            <InputOTPSeparator />
                                            <InputOTPGroup className="gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border">
                                                <InputOTPSlot index={2} />
                                                <InputOTPSlot index={3} />
                                            </InputOTPGroup>
                                            <InputOTPSeparator />
                                            <InputOTPGroup className="gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border">
                                                <InputOTPSlot index={4} />
                                                <InputOTPSlot index={5} />
                                            </InputOTPGroup>
                                        </InputOTP>
                                        <FieldDescription className="text-center">
                                            Enter the 6-digit code sent to your email.
                                        </FieldDescription>
                                    </Field>
                                    <Button type="submit">Verify</Button>
                                    <FieldDescription className="text-center">
                                        Didn&apos;t receive the code? <a href="#">Resend</a>
                                    </FieldDescription>
                                </FieldGroup>
                            </form>
                        </div>
                    </div>
                </div>
                <div className="hidden w-1/2 lg:flex items-center justify-center bg-muted">
                    <Image
                        src="https://tailwind-admin.com/images/login/login-side-image.webp"
                        alt="login-side-image"
                        width={450}
                        height={450}
                    />
                </div>
            </div>
        </section>
    )
}