/
lizardking
/
react_project
Обзор
Документация
Войти
/
lizardking
/
react_project
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
react19
src/features/subsrciption/ui/WizardEmail.tsx
56 строк
2 KB
LizardKing
Task 5 - styles
17 окт 2025, 14:23
17 окт 2025, 14:23
4ba1ff3
Код
Авторство
О чём код?
import { useActionState } from 'react' import { Input } from 'shared/ui/Input' import { PrimaryButton } from 'shared/ui/PrimaryButton' import { advance } from '../model/advance' import { type WizardState, initialState } from '../model/state' export function WizardEmail() { const [state, submit, isPending] = useActionState<WizardState, FormData>(advance, initialState) return ( <> {state.phase === 'step1' && ( <form action={submit} noValidate> <Input id="w-email" title="Email" name="email" type="email" placeholder="you@example.com" defaultValue={state.email} error={state.error} errorMessage={state.error} /> <div className="pt-2 flex justify-end"> <PrimaryButton type="submit" disabled={isPending}> {isPending ? 'Отправка…' : 'Далее'} </PrimaryButton> </div> </form> )} {state.phase === 'step2' && ( <form action={submit}> <p className="text-muted"> Подтвердить подписку для{' '} <strong className="text-fg">{state.email}</strong>? </p> <div className="pt-2 flex justify-end"> <PrimaryButton type="submit" disabled={isPending}> {isPending ? 'Подтверждаем…' : 'Подтвердить'} </PrimaryButton> </div> </form> )} {state.phase === 'success' && ( <div role="status" aria-live="polite" className="text-accent text-lg font-medium p-4 text-center"> {state.message} ({state.email}) </div> )} </> ) }