| 1 | "use client"; |
| 2 | |
| 3 | import { useState } from "react"; |
| 4 | |
| 5 | export default function MeForm() { |
| 6 | const [mode, setMode] = useState<"signin" | "signup">("signin"); |
| 7 | const [email, setEmail] = useState(""); |
| 8 | const [password, setPassword] = useState(""); |
| 9 | |
| 10 | return ( |
| 11 | <div className="bg-nord-gray border border-white/8 p-6 space-y-5"> |
| 12 | <div className="flex gap-px bg-white/5"> |
| 13 | <button |
| 14 | onClick={() => setMode("signin")} |
| 15 | className={`flex-1 py-2.5 text-[11px] uppercase tracking-widest font-bold transition-colors ${ |
| 16 | mode === "signin" |
| 17 | ? "bg-nord-white text-nord-black" |
| 18 | : "text-nord-white/40 hover:text-nord-white/70" |
| 19 | }`} |
| 20 | > |
| 21 | Sign In |
| 22 | </button> |
| 23 | <button |
| 24 | onClick={() => setMode("signup")} |
| 25 | className={`flex-1 py-2.5 text-[11px] uppercase tracking-widest font-bold transition-colors ${ |
| 26 | mode === "signup" |
| 27 | ? "bg-nord-white text-nord-black" |
| 28 | : "text-nord-white/40 hover:text-nord-white/70" |
| 29 | }`} |
| 30 | > |
| 31 | Join |
| 32 | </button> |
| 33 | </div> |
| 34 | |
| 35 | <div className="space-y-3"> |
| 36 | {mode === "signup" && ( |
| 37 | <input |
| 38 | type="text" |
| 39 | placeholder="Full name" |
| 40 | className="w-full bg-white/5 border border-white/10 text-nord-white placeholder:text-nord-white/25 px-4 py-3.5 text-sm focus:outline-none focus:border-white/30 transition-colors" |
| 41 | /> |
| 42 | )} |
| 43 | <input |
| 44 | type="email" |
| 45 | placeholder="Email" |
| 46 | value={email} |
| 47 | onChange={(e) => setEmail(e.target.value)} |
| 48 | className="w-full bg-white/5 border border-white/10 text-nord-white placeholder:text-nord-white/25 px-4 py-3.5 text-sm focus:outline-none focus:border-white/30 transition-colors" |
| 49 | /> |
| 50 | <input |
| 51 | type="password" |
| 52 | placeholder="Password" |
| 53 | value={password} |
| 54 | onChange={(e) => setPassword(e.target.value)} |
| 55 | className="w-full bg-white/5 border border-white/10 text-nord-white placeholder:text-nord-white/25 px-4 py-3.5 text-sm focus:outline-none focus:border-white/30 transition-colors" |
| 56 | /> |
| 57 | </div> |
| 58 | |
| 59 | <button |
| 60 | disabled={!email || !password} |
| 61 | className="w-full py-4 bg-nord-white text-nord-black font-bold text-[11px] uppercase tracking-widest rounded-none hover:bg-zinc-200 transition-colors disabled:opacity-25 disabled:cursor-not-allowed" |
| 62 | > |
| 63 | {mode === "signin" ? "Sign In" : "Create Account"} |
| 64 | </button> |
| 65 | |
| 66 | {mode === "signin" && ( |
| 67 | <p className="text-center text-[10px] text-nord-white/25 hover:text-nord-white/50 cursor-pointer transition-colors"> |
| 68 | Forgot password? |
| 69 | </p> |
| 70 | )} |
| 71 | </div> |
| 72 | ); |
| 73 | } |