Форма настроек

Сделай форму настроек профиля: поле «Имя», выбор языка интерфейса из списка (русский, английский), переключатель «Уведомления на почту» и кнопка «Сохранить». Состояние полей храни в компоненте, при отправке вызывай переданный колбэк onSave с объектом настроек.

settings-form__docs__claude-code__claude-opus-5__1 · 23.09.2026, 20:16:45 мск

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

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

Компилятор

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

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

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

JxButton, JxInputField, JxSelect, JxSwitch

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

Контекст

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

Вход 2 · выход 871 · из кэша 8 233 · в кэш 39 120 · 10 с

Рендер

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

tsx72 строки
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
66
67
68
69
70
71
72
import { useState, FormEvent } from 'react';
import { JxInputField, JxSelect, JxSwitch, JxButton } from '@jinx-ui/react';

export interface ProfileSettings {
  name: string;
  language: string;
  emailNotifications: boolean;
}

interface ProfileSettingsFormProps {
  initialValue?: ProfileSettings;
  onSave: (settings: ProfileSettings) => void;
}

export default function ProfileSettingsForm({ initialValue, onSave }: ProfileSettingsFormProps) {
  const [name, setName] = useState(initialValue?.name ?? '');
  const [language, setLanguage] = useState(initialValue?.language ?? 'ru');
  const [emailNotifications, setEmailNotifications] = useState(initialValue?.emailNotifications ?? true);

  const submit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSave({ name: name.trim(), language, emailNotifications });
  };

  return (
    <form
      onSubmit={submit}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '16px',
        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="Имя"
        required
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="Как к вам обращаться"
        errorText={name.length > 0 && name.trim().length === 0 ? 'Укажите имя' : undefined}
      />

      <JxSelect
        label="Язык интерфейса"
        options={[
          { value: 'ru', label: 'Русский' },
          { value: 'en', label: 'English' },
        ]}
        value={language}
        onValueChange={setLanguage}
      />

      <JxSwitch
        label="Уведомления на почту"
        checked={emailNotifications}
        onChange={(event) => setEmailNotifications(event.target.checked)}
      />

      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <JxButton type="submit" variant="primary" disabled={name.trim().length === 0}>
          Сохранить
        </JxButton>
      </div>
    </form>
  );
}