Подписка с уведомлением

Сделай форму подписки на рассылку с полем для почты и кнопкой «Подписаться». После отправки поле очищается, а в углу экрана появляется уведомление «Готово» с текстом, что письмо отправлено.

subscribe-toast__none__claude-code__claude-opus-5__1 · 23.09.2026, 19:48:50 мск

Есть проблемы
Без контекста · claude-opus-5 · Claude Code
Контекст до задачи~154
Токенов на прогон9 878
Цена$0.039
Ошибок компилятора7

Первый вызов модели получил 8 572 токена входа, включая системный промпт Claude Code. Контекст до задачи — оценка по длине текста, для русского текста она занижает число токенов в полтора-два раза.

Компилятор

  • Строка 3 · TS2724
    '"@jinx-ui/react"' has no exported member named 'Button'. Did you mean 'JxButton'?
  • Строка 3 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'Card'.
  • Строка 3 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'Input'.
  • Строка 3 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'Stack'.
  • Строка 3 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'Text'.
  • Строка 3 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'useToast'.
  • Строка 38 · TS7006
    Parameter 'event' implicitly has an 'any' type.
Выдуманные компоненты
ButtonCardInputStackTextuseToast

Линтер и покрытие

  • inline-styleСтрока 23
    Инлайновые стили вместо классов и токенов библиотеки
Компоненты библиотеки

Ни одного: код написан без библиотеки, поэтому прогон не засчитан

Ожидались JxInputField, JxButton, JxToastViewport · покрытие 0%

Контекст

Только формулировка задачи

Вход 2 · выход 1 306 · из кэша 8 233 · в кэш 337 · 17 с

Рендер

Код компонента

tsx48 строк
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
// Имена из @jinx-ui/react приняты по соглашению (Card/Stack/Input/Button/useToast) — сверьте с версией пакета.
import { useState, type FormEvent } from 'react';
import { Button, Card, Input, Stack, Text, useToast } from '@jinx-ui/react';

export default function NewsletterSubscribeForm() {
  const [email, setEmail] = useState('');
  const toast = useToast();

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    toast.show({
      title: 'Готово',
      description: `Письмо с подтверждением отправлено на ${email}`,
      variant: 'success',
      placement: 'bottom-right',
    });

    setEmail('');
  };

  return (
    <Card style={{ maxWidth: 'var(--jx-size-form-md)', padding: 'var(--jx-space-lg)' }}>
      <form onSubmit={handleSubmit} noValidate={false}>
        <Stack direction="column" gap="md">
          <Text as="h2" variant="heading-sm">
            Подписка на рассылку
          </Text>

          <Input
            type="email"
            name="email"
            label="Почта"
            placeholder="name@example.com"
            autoComplete="email"
            required
            value={email}
            onChange={(event) => setEmail(event.target.value)}
          />

          <Button type="submit" variant="primary" disabled={email.trim() === ''}>
            Подписаться
          </Button>
        </Stack>
      </form>
    </Card>
  );
}