src/components/header/AuthDialog.tsx


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

import { DialogContent, DialogTitle } from '@/components/ui/dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import LoginForm from './authdialog/LoginForm';
import RegisterForm from './authdialog/RegisterForm';
import ResetForm from './authdialog/ResetForm';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';

type AuthDialogProps = {
    redirectTo?: string | null;
};

export function AuthDialog({ redirectTo }: AuthDialogProps) {
    return (
        <div className="absolute">
            <DialogContent className="w-[350px] p-0 bg-transparent border-transparent">
                <VisuallyHidden>
                    <DialogTitle>Authentication</DialogTitle>
                </VisuallyHidden>
                <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"
                        >
                            <LoginForm />
                        </TabsContent>
                        <TabsContent
                            value="Register"
                            className="w-[350px] min-h-[348px] h-fit p-5 gap-5 flex flex-col items-center justify-center rounded-[15px] border-[2px] bg-background"
                        >
                            <RegisterForm />
                        </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"
                    >
                        <ResetForm />
                    </TabsContent>
                </Tabs>
            </DialogContent>
        </div>
    );
}