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

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

subscribe-toast__docs__claude-code__claude-opus-5__1 · 23.09.2026, 20:17:12 мск

Проверки пройдены
Доки · claude-opus-5 · Claude Code
Контекст до задачи~22 702
Токенов на прогон47 914
Цена$0.263
Ошибок компилятора0

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

Компилятор

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

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

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

JxButton, JxInputField, JxToastViewport

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

Контекст

Доки (llms-full.txt, ~22548)

Вход 2 · выход 589 · из кэша 8 233 · в кэш 39 090 · 7 с

Рендер

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

tsx58 строк
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
import { useState, type FormEvent } from 'react';
import {
  JxButton,
  JxInputField,
  JxToastViewport,
  useJxToastQueue,
} from '@jinx-ui/react';

export default function SubscribeForm() {
  const toasts = useJxToastQueue();
  const [email, setEmail] = useState('');

  const submit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    toasts.push({
      title: 'Готово',
      message: `Письмо с подтверждением отправлено на ${email}`,
      variant: 'success',
    });
    setEmail('');
  };

  return (
    <form
      onSubmit={submit}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '12px',
        maxWidth: '360px',
        padding: '20px',
        background: 'var(--jx-surface)',
        border: '1px solid var(--jx-border)',
        borderRadius: 'var(--jx-r)',
        fontFamily: 'var(--jx-font-sans)',
        color: 'var(--jx-text)',
      }}
    >
      <JxInputField
        label="Электронная почта"
        type="email"
        required
        placeholder="you@example.com"
        helperText="Раз в неделю, без спама"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
      <JxButton type="submit" variant="primary" disabled={!email}>
        Подписаться
      </JxButton>
      <JxToastViewport
        items={toasts.items}
        onDismiss={toasts.dismiss}
        position="top-right"
      />
    </form>
  );
}