OTP Input

"use client";

import {
  OtpInput,
  type OtpInputHandle,
  type OtpStatus,
} from "@/components/ui/otp-input";
import * as React from "react";

const CODE = "204815";

export default function OtpInputDemo() {
  const field = React.useRef<OtpInputHandle>(null);
  const [status, setStatus] = React.useState<OtpStatus>("idle");

  React.useEffect(() => {
    if (status === "idle") return;
    const back = setTimeout(() => {
      field.current?.clear();
      setStatus("idle");
    }, 1600);
    return () => clearTimeout(back);
  }, [status]);

  return (
    <div className="flex justify-center p-8">
      <OtpInput
        ref={field}
        status={status}
        onComplete={(value) => setStatus(value === CODE ? "success" : "error")}
        hint={`Try ${CODE}, or anything else.`}
        successMessage="Code accepted."
        errorMessage="That code is not right."
      />
    </div>
  );
}