refactor: login, register pages#18
Conversation
c720d0f to
35f4abf
Compare
35f4abf to
6052326
Compare
| return ( | ||
| <> | ||
| <div className="bg-gray-100 rounded-lg h-64 flex items-center justify-center text-gray-400 mt-8"> | ||
| Скриншот интерфейса |
There was a problem hiding this comment.
скриншота тут быть не должно, не обратил внимания что написал комент на весь блок. Соответственно компонент нужно переименовать по смыслу
| @@ -0,0 +1,12 @@ | |||
| 'use client'; | |||
|
|
|||
There was a problem hiding this comment.
Типизация. Пропсы и возвращаемое значение
| @@ -0,0 +1,12 @@ | |||
| 'use client'; | |||
There was a problem hiding this comment.
Компонент может работать как серверный
| <div className="bg-gray-100 rounded-lg h-64 flex items-center justify-center text-gray-400 mt-8"> | ||
| Скриншот интерфейса | ||
| </div> | ||
| <p className="text-gray-500 text-sm mt-4">© {new Date().getFullYear()} TaskTracker Lab.</p> |
There was a problem hiding this comment.
text-muted-foreground. mt-4 не нужен
|
|
||
| import { Button, InputGroup, InputGroupAddon, InputGroupInput } from 'shared/ui'; | ||
| import { useState } from 'react'; | ||
| export function PasswordInput(props: React.InputHTMLAttributes<HTMLInputElement>) { |
There was a problem hiding this comment.
- нужен более "тупой" компонент. Это будет компонент который меняет иконку по пропсу, всё остальное верни где было.
- Пустая строка между компонентом и импортами
- Переименуй по компонент по смыслу
| @@ -0,0 +1,20 @@ | |||
| 'use client'; | |||
|
|
||
| export function AppLogo() { | ||
| return ( | ||
| <div className="flex items-center mb-20 gap-3"> |
There was a problem hiding this comment.
никаких mb. почитай про схлопывание марджинов
| import Image from 'next/image'; | ||
| import { LogoImage } from 'shared/assets'; | ||
|
|
||
| export function AppLogo() { |
There was a problem hiding this comment.
типизация. пропсы и возвращаемое значение
There was a problem hiding this comment.
нужно добавить возможность выбора варианта логотипа и размера. Точно так же как это сделано в shared/ui/button
| return ( | ||
| <div className="flex items-center mb-20 gap-3"> | ||
| <Image src={LogoImage} alt="logo" /> | ||
| <h1 className="text-2xl font-bold">TaskTracker Lab</h1> |
| <div className="hidden md:flex flex-col justify-between bg-secondary p-10 w-1/2"> | ||
| <div> | ||
| <AppLogo /> | ||
| <div className="mb-4"> |
There was a problem hiding this comment.
лучше вместо mb-4 задать mt-4 ScreenshotPlaceholder
| </div> | ||
| <RegisterForm /> | ||
| <div className="flex gap-3 justify-center text-sm"> | ||
| <p className="text-muted-foreground mb-6">уже есть аккаунт?</p> |
There was a problem hiding this comment.
вместо mb-6 для блока div pb-6
| } | ||
|
|
||
| @theme { | ||
| --color-link: oklch(54.6% 0.245 262.881); |
There was a problem hiding this comment.
странная строчка. нужно --color-link: var(--link); и выше в @theme inline
| body { | ||
| @apply bg-background text-foreground; | ||
| } | ||
| button:not(:disabled), |
There was a problem hiding this comment.
это в shared/ui/button нужно
| return ( | ||
| <form className="space-y-6 mb-4" onSubmit={handleSubmit(onSubmit)}> | ||
| <div className="flex flex-col space-y-4"> | ||
| <form className="space-y-6 mb-6" onSubmit={handleSubmit(onSubmit)}> |
There was a problem hiding this comment.
mb-6 не нужен, этот отступ лучше задать другим способом в пэйдже
| {errors.email && ( | ||
| <FieldDescription className="text-red-500">{errors.email.message}</FieldDescription> | ||
| )} | ||
| {errors.email && <FieldError className="text-red-500">{errors.email.message}</FieldError>} |
There was a problem hiding this comment.
зачем тут кастомный text-red?
| <FieldDescription className="text-red-500 text-sm"> | ||
| {errors.password.message} | ||
| </FieldDescription> | ||
| <FieldError className="text-red-500 text-sm">{errors.password.message}</FieldError> |
There was a problem hiding this comment.
зачем тут кастомный text-red? еще и размер текста
| <FieldError className="text-red-500 text-sm">{errors.password.message}</FieldError> | ||
| )} | ||
| </Field> | ||
| <div className="flex items-center justify-between text-sm"> |
There was a problem hiding this comment.
label все равно переопределяет размер текста. если он нужен, то тогда нужно его только для link задать
| </Link> | ||
| </Label> | ||
| {errors.terms && ( | ||
| <FieldError className="text-red-500 text-xs ml-6">{errors.terms.message}</FieldError> |
| )} | ||
| /> | ||
| Я согласен с | ||
| <Link href="/auth/reset-password" className="text-link hover:underline"> |
There was a problem hiding this comment.
нужно создать Link в shared/ui с нужными стилями
| </Field> | ||
| <div className="flex items-center justify-between text-sm"> | ||
| <Label className="flex items-center gap-2"> | ||
| <Checkbox /> |
There was a problem hiding this comment.
нужен в схеме и контролируемый ввод
| <Checkbox /> | ||
| Запомнить меня | ||
| </Label> | ||
| <Link href="/auth/reset-password" className="text-link hover:underline"> |
There was a problem hiding this comment.
про линк где-то в регистрации писал уже
| @@ -1,19 +1,34 @@ | |||
| 'use client'; | |||
There was a problem hiding this comment.
должен работать как серверный, вроде ничего не мешает
kapitulin24
left a comment
There was a problem hiding this comment.
в папке shared/ui пишем в кебаб-кейс как уже заведено в shadcn дабы каждый компонент не переименовывать при добавлении. Все остальное в кэмел кейс.
ошибки в регистрации аналогичны логину и наоборот, так что всё не писал
No description provided.