1// Example: Authentication Layout with shadcn/ui
2// Demonstrates: Layout composition, card usage, form integration
3 
4"use client"
5 
6import { Button } from "@/components/ui/button"
7import {
8    Card,
9    CardContent,
10    CardDescription,
11    CardFooter,
12    CardHeader,
13    CardTitle,
14} from "@/components/ui/card"
15import { 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="[email protected]"
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="[email protected]"
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 */
178