1  'use client'
 2  
 3  import { useState } from 'react'
 4  import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
 5  import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 6  import { Input } from "@/components/ui/input"
 7  import { Label } from "@/components/ui/label"
 8  import { Button } from "@/components/ui/button"
 9  
10  interface AuthModalProps {
11    isOpen: boolean
12    onClose: () => void
13  }
14  
15  export function AuthModal({ isOpen, onClose }: AuthModalProps) {
16    const [activeTab, setActiveTab] = useState<'signin' | 'register'>('signin')
17  
18    const handleSubmit = (e: React.FormEvent) => {
19      e.preventDefault()
20      // Here you would handle the authentication logic
21      console.log('Form submitted:', activeTab)
22    }
23  
24    return (
25      <Dialog open={isOpen} onOpenChange={onClose}>
26        <DialogContent className="sm:max-w-[425px]">
27          <DialogHeader>
28            <DialogTitle>Authentication</DialogTitle>
29            <DialogDescription>
30              Sign in to your account or create a new one.
31            </DialogDescription>
32          </DialogHeader>
33          <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as 'signin' | 'register')}>
34            <TabsList className="grid w-full grid-cols-2">
35              <TabsTrigger value="signin">Sign In</TabsTrigger>
36              <TabsTrigger value="register">Register</TabsTrigger>
37            </TabsList>
38            <TabsContent value="signin">
39              <form onSubmit={handleSubmit}>
40                <div className="grid gap-4 py-4">
41                  <div className="grid gap-2">
42                    <Label htmlFor="email-signin">Email</Label>
43                    <Input id="email-signin" type="email" placeholder="m@example.com" required />
44                  </div>
45                  <div className="grid gap-2">
46                    <Label htmlFor="password-signin">Password</Label>
47                    <Input id="password-signin" type="password" required />
48                  </div>
49                </div>
50                <Button type="submit" className="w-full">Sign In</Button>
51              </form>
52            </TabsContent>
53            <TabsContent value="register">
54              <form onSubmit={handleSubmit}>
55                <div className="grid gap-4 py-4">
56                  <div className="grid gap-2">
57                    <Label htmlFor="username-register">Username</Label>
58                    <Input id="username-register" type="text" required />
59                  </div>
60                  <div className="grid gap-2">
61                    <Label htmlFor="email-register">Email</Label>
62                    <Input id="email-register" type="email" placeholder="m@example.com" required />
63                  </div>
64                  <div className="grid gap-2">
65                    <Label htmlFor="password-register">Password</Label>
66                    <Input id="password-register" type="password" required />
67                  </div>
68                  <div className="grid gap-2">
69                    <Label htmlFor="confirm-password-register">Confirm Password</Label>
70                    <Input id="confirm-password-register" type="password" required />
71                  </div>
72                </div>
73                <Button type="submit" className="w-full">Register</Button>
74              </form>
75            </TabsContent>
76          </Tabs>
77        </DialogContent>
78      </Dialog>
79    )
80  }
81