add register and reset dialogs

9 files changed, 295 insertions, 48 deletions

diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index 5e0282f..63dde1e 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -23,29 +23,34 @@ export function Footer() {
                     <span className="underline text-sm">
                         Terms and Conditions · Privacy Policy
                     </span>
-                    <span className="text-xs">© 2025 artberry.xyz</span>
+                    <span className="text-xs">
+                        © {new Date().getFullYear()} artberry.xyz
+                    </span>
                 </div>
             </div>
-            <div className="flex justify-between gap-[195px]">
-                <div className="flex-row flex gap-[100px] h-[130px] w-[354px]">
-                    <div className="leading-[22px] h-[118px] flex flex-col gap-[10px] w-[165px] font-[500] text-[16px]">
+            <div className="flex justify-between gap-48.75">
+                <div className="flex-row flex gap-25 h-32.5 w-88.5">
+                    <div className=" leading-5.5 h-29.5 flex flex-col gap-2.5 w-41.25">
                         <Link
                             href="/upload"
-                            className="flex gap-[5px] h-[22px]"
+                            className="flex gap-1.25 flex-row items-center"
                         >
-                            <Download className="w-[19px] h-[19px]" />
-                            <span>Загрузить контент</span>
+                            <Download className="w-4.75 h-4.75" />
+                            <span className="">Загрузить контент</span>
                         </Link>
-                        <Link className="flex gap-[5px]" href="/faq">
+                        <Link className="flex gap-1.25" href="/faq">
                             <Faq />
                             <span>FAQ</span>
                         </Link>
-                        <Link className="flex gap-[5px]" href="/premium">
+                        <Link
+                            className="flex gap-1.25 flex-row items-center"
+                            href="/premium"
+                        >
                             <Premium />
                             <span>Премиум</span>
                         </Link>
                         <Link
-                            className="flex gap-[5px]"
+                            className="flex gap-1.25 flex-row items-center"
                             target="_blank"
                             href="https://discord.gg/pJ66ZFpQQK"
                         >
@@ -54,7 +59,7 @@ export function Footer() {
                             <span>Сообщество</span>
                         </Link>
                     </div>
-                    <div className=" flex w-[88px] leading-[22px] flex-col font-[500] text-[16px] gap-[5px]">
+                    <div className=" flex flex-col leading-5.5 gap-1.25">
                         <span>Теги</span>
                         <span>Персонажи</span>
                         <span>Категории</span>
@@ -62,8 +67,8 @@ export function Footer() {
                         <span>Рандом</span>
                     </div>
                 </div>
-                <div className="w-[170px] h-[19px] bg-violet gap-[5px] flex flex-row items-center flex flex-row items-center justify-center  w-[150px] h-[42px]   px-[30px] py-[10px] rounded-[20px]">
-                    <span className="font-[500] text-[16px]">English</span>
+                <div className="w-42.5 h-4.75 bg-violet gap-1.25 flex flex-row items-center items-center justify-center w-37.5 h-10.5 px-7.5 py-2.5 rounded-[20px]">
+                    <span>English</span>
                     <English />
                 </div>
             </div>
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>
diff --git a/src/components/header/NavBar.tsx b/src/components/header/NavBar.tsx
index 217be3a..419f7d8 100644
--- a/src/components/header/NavBar.tsx
+++ b/src/components/header/NavBar.tsx
@@ -45,7 +45,7 @@ export function NavBar() {
                 </div>
             </div>
 
-            <div className="flex gap-3.75 items-center shrink-0">
+            <div className="flex gap-5 items-center shrink-0">
                 <Link href={'#'} className="hover:[&_path]:fill-light-violet">
                     <DiscordIcon />
                 </Link>
diff --git a/src/components/header/ProfileOrLogin.tsx b/src/components/header/ProfileOrLogin.tsx
index 874e0fc..416418b 100644
--- a/src/components/header/ProfileOrLogin.tsx
+++ b/src/components/header/ProfileOrLogin.tsx
@@ -13,7 +13,9 @@ export function ProfileOrLogin() {
         return (
             <Dialog>
                 <DialogTrigger asChild>
-                    <Button className="py-2.5 px-3.75">ВОЙТИ</Button>
+                    <Button className="py-2.5 px-3.75 gap-10 w-21.75 h-10.5">
+                        ВОЙТИ
+                    </Button>
                 </DialogTrigger>
                 <AuthDialog />
             </Dialog>
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 46fe445..1aaba43 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -60,7 +60,7 @@ function DialogContent({
             <DialogPrimitive.Content
                 data-slot="dialog-content"
                 className={cn(
-                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',
+                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border shadow-lg duration-200 outline-none sm:max-w-lg',
                     className,
                 )}
                 {...props}
@@ -70,9 +70,7 @@ function DialogContent({
                     <DialogPrimitive.Close
                         data-slot="dialog-close"
                         className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-                    >
-                        <span className="sr-only">Close</span>
-                    </DialogPrimitive.Close>
+                    ></DialogPrimitive.Close>
                 )}
             </DialogPrimitive.Content>
         </DialogPortal>
diff --git a/src/components/ui/inputfield.tsx b/src/components/ui/inputfield.tsx
new file mode 100644
index 0000000..40d5206
--- /dev/null
+++ b/src/components/ui/inputfield.tsx
@@ -0,0 +1,16 @@
+import { Input } from '@/components/ui/input';
+
+interface InputFIeldProps {
+    placeholder: string;
+}
+
+export function InputField({ placeholder }: InputFIeldProps) {
+    return (
+        <div className="rounded-[20px] border-violet border-[2px] h-[39px] flex items-center justify-between py-[10px] px-[20px]">
+            <Input
+                placeholder={placeholder}
+                className="w-full flex text-white placeholder:text-light-violet text-sm min-w-[270px] h-[19px]"
+            />
+        </div>
+    );
+}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..88302a8
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index ed26736..f7fadc6 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -26,7 +26,7 @@ function TabsList({
         <TabsPrimitive.List
             data-slot="tabs-list"
             className={cn(
-                'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+                'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[4px]',
                 className,
             )}
             {...props}
@@ -42,7 +42,7 @@ function TabsTrigger({
         <TabsPrimitive.Trigger
             data-slot="tabs-trigger"
             className={cn(
-                "data-[state=active]:bg-violet focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground inline-flex h-[22px] items-center justify-center rounded-[10px] border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                "data-[state=active]:bg-violet focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground inline-flex h-[26px] items-center justify-center rounded-[10px] border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
                 className,
             )}
             {...props}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7f21b5e
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }