Preview
Full width desktop view
Code
auth-4.tsx
1"use client";
2
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { Label } from "@/components/ui/label";
6import {
7 Card,
8 CardContent,
9 CardDescription,
10 CardHeader,
11 CardTitle,
12} from "@/components/ui/card";
13import { Separator } from "@/components/ui/separator";
14import { Checkbox } from "@/components/ui/checkbox";
15import {
16 Eye,
17 EyeOff,
18 Mail,
19 Lock,
20 User,
21 Phone,
22 ArrowRight,
23 Github,
24 Chrome,
25} from "lucide-react";
26import { useState } from "react";
27
28export function LoginBlock4() {
29 const [showPassword, setShowPassword] = useState(false);
30 const [showConfirmPassword, setShowConfirmPassword] = useState(false);
31 const [acceptTerms, setAcceptTerms] = useState(false);
32
33 return (
34 <section className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-blue-50 dark:from-background dark:to-muted/20 p-4">
35 <Card className="w-full max-w-lg border-2 shadow-2xl">
36 <CardHeader className="space-y-4 text-center">
37 <div className="mx-auto w-16 h-16 bg-gradient-to-br from-green-500 to-blue-500 rounded-full flex items-center justify-center">
38 <User className="h-8 w-8 text-white" />
39 </div>
40 <div className="space-y-2">
41 <CardTitle className="text-2xl font-bold">
42 Create Your Account
43 </CardTitle>
44 <CardDescription className="text-muted-foreground">
45 Join us today and start your journey
46 </CardDescription>
47 </div>
48 </CardHeader>
49
50 <CardContent className="space-y-6">
51 {/* Social Signup */}
52 <div className="space-y-3">
53 <Button variant="outline" className="w-full gap-3 h-11">
54 <Chrome className="h-4 w-4 text-blue-500" />
55 Sign up with Google
56 </Button>
57 <Button variant="outline" className="w-full gap-3 h-11">
58 <Github className="h-4 w-4" />
59 Sign up with GitHub
60 </Button>
61 </div>
62
63 <div className="relative">
64 <div className="absolute inset-0 flex items-center">
65 <Separator className="w-full" />
66 </div>
67 <div className="relative flex justify-center text-xs uppercase">
68 <span className="bg-background px-2 text-muted-foreground">
69 Or sign up with email
70 </span>
71 </div>
72 </div>
73
74 {/* Registration Form */}
75 <form className="space-y-4">
76 <div className="grid grid-cols-2 gap-4">
77 <div className="space-y-2">
78 <Label htmlFor="firstName">First Name</Label>
79 <div className="relative">
80 <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
81 <Input id="firstName" placeholder="John" className="pl-10" />
82 </div>
83 </div>
84 <div className="space-y-2">
85 <Label htmlFor="lastName">Last Name</Label>
86 <div className="relative">
87 <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
88 <Input id="lastName" placeholder="Doe" className="pl-10" />
89 </div>
90 </div>
91 </div>
92
93 <div className="space-y-2">
94 <Label htmlFor="email">Email Address</Label>
95 <div className="relative">
96 <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
97 <Input
98 id="email"
99 type="email"
100 placeholder="john@example.com"
101 className="pl-10"
102 />
103 </div>
104 </div>
105
106 <div className="space-y-2">
107 <Label htmlFor="phone">Phone Number (Optional)</Label>
108 <div className="relative">
109 <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
110 <Input
111 id="phone"
112 type="tel"
113 placeholder="+1 (555) 000-0000"
114 className="pl-10"
115 />
116 </div>
117 </div>
118
119 <div className="space-y-2">
120 <Label htmlFor="password">Password</Label>
121 <div className="relative">
122 <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
123 <Input
124 id="password"
125 type={showPassword ? "text" : "password"}
126 placeholder="Create a strong password"
127 className="pl-10 pr-10"
128 />
129 <Button
130 type="button"
131 variant="ghost"
132 size="icon"
133 className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
134 onClick={() => setShowPassword(!showPassword)}
135 >
136 {showPassword ? (
137 <EyeOff className="h-4 w-4 text-muted-foreground" />
138 ) : (
139 <Eye className="h-4 w-4 text-muted-foreground" />
140 )}
141 </Button>
142 </div>
143 </div>
144
145 <div className="space-y-2">
146 <Label htmlFor="confirmPassword">Confirm Password</Label>
147 <div className="relative">
148 <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
149 <Input
150 id="confirmPassword"
151 type={showConfirmPassword ? "text" : "password"}
152 placeholder="Confirm your password"
153 className="pl-10 pr-10"
154 />
155 <Button
156 type="button"
157 variant="ghost"
158 size="icon"
159 className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
160 onClick={() => setShowConfirmPassword(!showConfirmPassword)}
161 >
162 {showConfirmPassword ? (
163 <EyeOff className="h-4 w-4 text-muted-foreground" />
164 ) : (
165 <Eye className="h-4 w-4 text-muted-foreground" />
166 )}
167 </Button>
168 </div>
169 </div>
170
171 <div className="space-y-4">
172 <div className="flex items-start space-x-2">
173 <Checkbox
174 id="terms"
175 checked={acceptTerms}
176 onCheckedChange={() => {
177 setAcceptTerms(!acceptTerms);
178 }}
179 className="mt-1"
180 />
181 <Label htmlFor="terms" className="text-sm leading-relaxed">
182 I agree to the{" "}
183 <Button variant="link" className="px-0 h-auto text-sm">
184 Terms of Service
185 </Button>{" "}
186 and{" "}
187 <Button variant="link" className="px-0 h-auto text-sm">
188 Privacy Policy
189 </Button>
190 </Label>
191 </div>
192
193 <div className="flex items-center space-x-2">
194 <Checkbox id="newsletter" />
195 <Label htmlFor="newsletter" className="text-sm">
196 Send me product updates and marketing emails
197 </Label>
198 </div>
199 </div>
200
201 <Button
202 type="submit"
203 className="w-full gap-2 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700"
204 disabled={!acceptTerms}
205 >
206 Create Account
207 <ArrowRight className="h-4 w-4" />
208 </Button>
209 </form>
210
211 <div className="text-center text-sm text-muted-foreground">
212 Already have an account?{" "}
213 <Button variant="link" className="px-0 font-medium">
214 Sign in here
215 </Button>
216 </div>
217 </CardContent>
218 </Card>
219 </section>
220 );
221}
Dependencies
External Libraries
lucide-reactreact
Shadcn/UI Components
buttoncardcheckboxinputlabelseparator