blob: c125c66bfcc527dd4248022ef0af05bb1ad85014 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
import { Button } from '@/components/ui/button';
import { DialogContent } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import GoogleIcon from '../../../public/icons/google.svg';
import { InputField } from '../ui/inputfield';
export function AuthDialog() {
return (
<div className="absolute">
<DialogContent className="w-[350px] p-0 bg-transparent border-transparent">
<Tabs defaultValue="Login">
<div className="flex flex-col gap-[5px] ">
<TabsList className="w-[350px] h-[36px] justify-between bg-background border border-violet rounded-[15px]">
<TabsTrigger value="Login" className="w-[59px]">
<span className="w-[39px]">Вход</span>
</TabsTrigger>
<TabsTrigger value="Register" className="w-[116px]">
<span className="w-[96px]">Регистрация</span>
</TabsTrigger>
<TabsTrigger
value="Reset"
className="w-[145px] gap-[10px] text-[16px] "
>
<span className="w-[125px]">
Восстановление
</span>
</TabsTrigger>
</TabsList>
<TabsContent
value="Login"
className="w-[350px] min-h-[250px] p-5 gap-5 flex flex-col items-center justify-center rounded-[15px] border-[2px] bg-background"
>
<div className="gap-5 flex flex-col h-[148px] w-[310px]">
<Button className="w-full bg-white hover:bg-white hover:text-black">
<GoogleIcon />
<span className="text-black text-sm">
Войти через Google
</span>
</Button>
<div className="gap-[10px] flex-col flex h-[88px]">
<InputField placeholder="Никнейм или почта" />
<InputField placeholder="Пароль" />
</div>
</div>
<Button className="w-full gap-[10px]">Войти</Button>
</TabsContent>
<TabsContent
value="Register"
className="w-[350px] max-h-[348px] p-5 gap-5 flex flex-col items-center justify-center rounded-[15px] border-[2px] bg-background"
>
<div className="gap-5 flex flex-col w-[310px]">
<Button className="w-full bg-white hover:bg-white hover:text-black">
<GoogleIcon />
<span className="text-black">
Войти через Google
</span>
</Button>
<div className="gap-2.5 flex flex-col">
<InputField placeholder="Никнейм" />
<InputField placeholder="E-mail" />
<InputField placeholder="Пароль" />
<InputField placeholder="Повторите пароль" />
</div>
</div>
<Button className="w-full">Войти</Button>
</TabsContent>
</div>
<TabsContent
value="Reset"
className="w-[350px] max-h-[231px] p-5 gap-5 flex-col items-center justify-center rounded-[15px] border-[2px] bg-background"
>
<div className="flex gap-5 flex-col">
<div className="flex flex-col w-[310px] gap-5">
<span className="">ВОССТАНОВЛЕНИЕ ПАРОЛЯ</span>
<div className=" gap-2.5 flex flex-col">
<span className="text-sm">
Введите никнейм или почту, с помощью
которых входите в аккаунт.
</span>
<InputField placeholder="Никнейм или почта"></InputField>
</div>
</div>
<Button className="w-full">Восстановить</Button>
</div>
</TabsContent>
</Tabs>
</DialogContent>
</div>
);
}
|
