2 files changed
+54
-79
components/me/me-form.tsx
+53
-78
@@ -8,91 +8,66 @@ export default function MeForm() {
8
const [password, setPassword] = useState("");
9
10
return (
11
- <>
12
- {/* Auth card */}
13
- <div className="bg-nord-gray border border-white/8 p-6 space-y-5">
14
- <div className="flex gap-px bg-white/5">
15
- <button
16
- onClick={() => setMode("signin")}
17
- className={`flex-1 py-2.5 text-[11px] uppercase tracking-widest font-bold transition-colors ${
18
- mode === "signin" ? "bg-nord-white text-nord-black" : "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" ? "bg-nord-white text-nord-black" : "text-nord-white/40 hover:text-nord-white/70"
27
- }`}
28
- >
29
- Join
30
- </button>
31
- </div>
32
-
33
- <div className="space-y-3">
34
- {mode === "signup" && (
35
- <input
36
- type="text"
37
- placeholder="Full name"
38
- 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"
39
- />
40
- )}
41
- <input
42
- type="email"
43
- placeholder="Email"
44
- value={email}
45
- onChange={(e) => setEmail(e.target.value)}
46
- 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"
47
- />
48
- <input
49
- type="password"
50
- placeholder="Password"
51
- value={password}
52
- onChange={(e) => setPassword(e.target.value)}
53
- 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"
54
- />
55
- </div>
56
-
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
58
- disabled={!email || !password}
59
- 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"
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
>
61
- {mode === "signin" ? "Sign In" : "Create Account"}
31
+ Join
32
</button>
33
+ </div>
34
64
- {mode === "signin" && (
65
- <p className="text-center text-[10px] text-nord-white/25 hover:text-nord-white/50 cursor-pointer transition-colors">
66
- Forgot password?
67
- </p>
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
71
- {/* Divider */}
72
- <div className="flex items-center gap-4 my-6">
73
- <div className="flex-1 h-px bg-white/8" />
74
- <span className="text-[9px] uppercase tracking-widest text-nord-white/20">Or continue with</span>
75
- <div className="flex-1 h-px bg-white/8" />
76
- </div>
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
78
- {/* OAuth */}
79
- <div className="space-y-3">
80
- <button className="w-full py-3.5 bg-white/5 border border-white/10 text-nord-white text-[11px] uppercase tracking-widest font-medium hover:bg-white/10 transition-colors flex items-center justify-center gap-3">
81
- <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="text-nord-white/70">
82
- <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
83
- <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
84
- <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
85
- <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
86
- </svg>
87
- Google
88
- </button>
89
- <button className="w-full py-3.5 bg-white/5 border border-white/10 text-nord-white text-[11px] uppercase tracking-widest font-medium hover:bg-white/10 transition-colors flex items-center justify-center gap-3">
90
- <svg width="16" height="16" viewBox="0 0 814 1000" fill="currentColor" className="text-nord-white/70">
91
- <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 382.8-.3 341.5 0 300.3 0 266.9 3.2 258.2 12 258.2c11.6 0 24.5 7.7 35.5 11.9 32 13.7 66.8 36.2 100.9 70.4 59.6 61.8 102.8 130 169.7 130 72.2 0 117.2-39.5 170.4-39.5 47.2 0 86.4 28.8 155.9 39.5z"/>
92
- </svg>
93
- Apple
94
- </button>
95
- </div>
96
- </>
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
}
package.json
+1
-1
@@ -1,6 +1,6 @@
1
{
2
"name": "nord",
3
- "version": "0.1.0",
3
+ "version": "1.0.0",
4
"private": true,
5
"scripts": {
6
"dev": "next dev",