diff options
Diffstat (limited to 'src/components/header/AuthDialog.tsx')
| -rw-r--r-- | src/components/header/AuthDialog.tsx | 72 |
1 files changed, 45 insertions, 27 deletions
diff --git a/src/components/header/AuthDialog.tsx b/src/components/header/AuthDialog.tsx index c1f359e..c125c66 100644 --- a/src/components/header/AuthDialog.tsx +++ b/src/components/header/AuthDialog.tsx @@ -3,23 +3,18 @@ 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] font-medium justify-between bg-background border border-violet rounded-[15px]"> - <TabsTrigger - value="Login" - className="w-[59px] text-[16px] leading-[22px]" - > + <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] text-[16px]" - > + <TabsTrigger value="Register" className="w-[116px]"> <span className="w-[96px]">Регистрация</span> </TabsTrigger> <TabsTrigger @@ -33,38 +28,61 @@ export function AuthDialog() { </TabsList> <TabsContent value="Login" - className="w-[350px] min-h-[250px] p-4 gap-4 flex flex-col items-center justify-center rounded-[15px] border-[2px] bg-background" + 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"> + <span className="text-black text-sm"> Войти через Google </span> </Button> <div className="gap-[10px] flex-col flex h-[88px]"> - <div className="rounded-[20px] border-violet border-[2px] h-[39px] justify-between py-[10px] px-[20px] items-center flex"> - <Input - className="w-full flex text-white placeholder:text-light-violet h-[19px]" - placeholder="Никнейм или почта" - /> - </div> - <div className="rounded-[20px] border-violet border-[2px] h-[39px] justify-between py-[10px] px-[20px] items-center flex"> - <Input - className="w-full flex text-white placeholder:text-light-violet h-[19px]" - placeholder="пароль" - /> - </div> + <InputField placeholder="Никнейм или почта" /> + <InputField placeholder="Пароль" /> </div> </div> <Button className="w-full gap-[10px]">Войти</Button> </TabsContent> - <TabsContent value="Register"> - <div className="h-[99px]"></div> + <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> - - <TabsContent value="Reset"></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> |