Setting the file. One moment. examples/auth-layout.tsx
examples/auth-layout.tsx
TypeScript·177 lines·6 KB
import
{ Input }
from
"@/components/ui/input"
16import { Label } from "@/components/ui/label"
17import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
18import { useState } from "react"
19
20export function AuthLayout() {
21 const [isLoading, setIsLoading] = useState<boolean>(false)
22
23 async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
24 event.preventDefault()
25 setIsLoading(true)
26
27 // Simulate API call
28 setTimeout(() => {
29 setIsLoading(false)
30 }, 2000)
31 }
32
33 return (
34 <div className="flex min-h-screen items-center justify-center bg-muted/40">
35 <Tabs defaultValue="login" className="w-[400px]">
36 <TabsList className="grid w-full grid-cols-2">
37 <TabsTrigger value="login">Login</TabsTrigger>
38 <TabsTrigger value="register">Register</TabsTrigger>
39 </TabsList>
40
41 <TabsContent value="login">
42 <Card>
43 <CardHeader>
44 <CardTitle>Login</CardTitle>
45 <CardDescription>
46 Enter your credentials to access your account.
47 </CardDescription>
48 </CardHeader>
49 <form onSubmit={onSubmit}>
50 <CardContent className="space-y-4">
51 <div className="space-y-2">
52 <Label htmlFor="email">Email</Label>
53 <Input
54 id="email"
55 type="email"
56 placeholder="m@example.com"
57 required
58 />
59 </div>
60 <div className="space-y-2">
61 <Label htmlFor="password">Password</Label>
62 <Input
63 id="password"
64 type="password"
65 required
66 />
67 </div>
68 </CardContent>
69 <CardFooter className="flex flex-col space-y-4">
70 <Button
71 type="submit"
72 className="w-full"
73 disabled={isLoading}
74 >
75 {isLoading ? "Signing in..." : "Sign in"}
76 </Button>
77 <Button
78 type="button"
79 variant="link"
80 className="w-full text-sm text-muted-foreground"
81 >
82 Forgot password?
83 </Button>
84 </CardFooter>
85 </form>
86 </Card>
87 </TabsContent>
88
89 <TabsContent value="register">
90 <Card>
91 <CardHeader>
92 <CardTitle>Create an account</CardTitle>
93 <CardDescription>
94 Enter your information to create an account.
95 </CardDescription>
96 </CardHeader>
97 <form onSubmit={onSubmit}>
98 <CardContent className="space-y-4">
99 <div className="space-y-2">
100 <Label htmlFor="name">Name</Label>
101 <Input
102 id="name"
103 placeholder="John Doe"
104 required
105 />
106 </div>
107 <div className="space-y-2">
108 <Label htmlFor="register-email">Email</Label>
109 <Input
110 id="register-email"
111 type="email"
112 placeholder="m@example.com"
113 required
114 />
115 </div>
116 <div className="space-y-2">
117 <Label htmlFor="register-password">Password</Label>
118 <Input
119 id="register-password"
120 type="password"
121 required
122 />
123 </div>
124 <div className="space-y-2">
125 <Label htmlFor="confirm-password">Confirm Password</Label>
126 <Input
127 id="confirm-password"
128 type="password"
129 required
130 />
131 </div>
132 </CardContent>
133 <CardFooter>
134 <Button
135 type="submit"
136 className="w-full"
137 disabled={isLoading}
138 >
139 {isLoading ? "Creating account..." : "Create account"}
140 </Button>
141 </CardFooter>
142 </form>
143 </Card>
144 </TabsContent>
145 </Tabs>
146 </div>
147 )
148}
149
150/**
151 * Key Patterns Demonstrated:
152 *
153 * 1. Layout Composition: Centered authentication card with full-height viewport
154 * 2. Card Usage: Structured content with header, body, and footer
155 * 3. Tabs: Switch between login and register forms
156 * 4. Form Structure: Proper labeling and input grouping
157 * 5. Loading States: Button disabled state during form submission
158 * 6. Responsive Design: Mobile-friendly with max-width constraint
159 * 7. Tailwind Utilities: Using spacing, flexbox, and grid utilities
160 *
161 * Design Choices:
162 * - Minimal, clean interface focusing on the task at hand
163 * - Proper semantic HTML with form elements
164 * - Accessible labels and inputs
165 * - Clear visual hierarchy with card components
166 * - Loading feedback for better UX
167 *
168 * Required Dependencies:
169 * None beyond React and shadcn/ui components
170 *
171 * Installation:
172 * npx shadcn@latest add card
173 * npx shadcn@latest add input
174 * npx shadcn@latest add label
175 * npx shadcn@latest add button
176 * npx shadcn@latest add tabs
177 */