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

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

subscribe-toast__docs-rules__claude-code__claude-opus-5__1 · 23.09.2026, 21:52:56 мск

Проверки пройдены
Доки + правила · claude-opus-5 · Claude Code
Контекст до задачи~23 785
Токенов на прогон49 740
Цена$0.277
Ошибок компилятора0

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

Компилятор

Ошибок нет: все компоненты и пропсы существуют.

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

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

JxButton, JxInputField, JxToastViewport

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

Контекст

Доки (llms-full.txt, ~22548) · Правила (jinx-ui, ~1083)

Вход 2 · выход 710 · из кэша 8 233 · в кэш 40 795 · 9 с

Рендер

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

tsx65 строк
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import { useState, type FormEvent } from 'react';
import {
  JxButton,
  JxInputField,
  JxToastViewport,
  useJxToastQueue,
} from '@jinx-ui/react';

export default function NewsletterSubscribeForm() {
  const toasts = useJxToastQueue();
  const [email, setEmail] = useState('');
  const [touched, setTouched] = useState(false);

  const emailError =
    touched && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
      ? 'Укажите корректный адрес, например name@example.com'
      : undefined;

  const submit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setTouched(true);
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return;

    toasts.push({
      title: 'Готово',
      message: `Письмо с подтверждением отправлено на ${email}`,
      variant: 'success',
    });
    setEmail('');
    setTouched(false);
  };

  return (
    <form
      onSubmit={submit}
      style={{ display: 'grid', gap: '16px', maxWidth: '360px' }}
    >
      <JxInputField
        label="Электронная почта"
        type="email"
        name="email"
        required
        autoComplete="email"
        placeholder="name@example.com"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        onBlur={() => setTouched(true)}
        helperText="Присылаем письма раз в неделю, отписаться можно в один клик"
        errorText={emailError}
      />

      <div style={{ display: 'flex', gap: '8px' }}>
        <JxButton type="submit" variant="primary">
          Подписаться
        </JxButton>
      </div>

      <JxToastViewport
        items={toasts.items}
        onDismiss={toasts.dismiss}
        position="bottom-right"
      />
    </form>
  );
}