Login and dashboard added

components/auth/otpInput.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useRef } from "react";
+
+export default function OTPInput() {
+  const refs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    if (e.target.value && index < 5) {
+      refs.current[index + 1]?.focus();
+    }
+  };
+
+  return (
+    <div className="flex gap-3">
+      {[...Array(6)].map((_, index) => (
+        <input
+          key={index}
+          maxLength={1}
+          ref={(el) => {
+            refs.current[index] = el;
+          }}
+          onChange={(e) => handleChange(e, index)}
+          className="h-16 w-16 rounded-xl border border-slate-700 bg-[#13233a] text-center text-2xl text-white outline-none focus:border-teal-400"
+        />
+      ))}
+    </div>
+  );
+}