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

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

settings-form__docs-rules__claude-code__claude-opus-5__1 · 23.09.2026, 21:52:28 мск

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

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

Компилятор

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

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

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

JxButton, JxInputField, JxSelect, JxSwitch

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

Контекст

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

Вход 2 · выход 903 · из кэша 8 233 · в кэш 40 825 · 10 с

Рендер

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

tsx85 строк
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
73
74
75
76
77
78
79
80
81
82
83
84
85
import { useState, type FormEvent } from 'react';
import { JxButton, JxInputField, JxSelect, JxSwitch } from '@jinx-ui/react';

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

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

const languages = [
  { value: 'ru', label: 'Русский' },
  { value: 'en', label: 'English' },
];

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

  const trimmedName = name.trim();
  const nameError = submitted && !trimmedName ? 'Укажите имя' : undefined;

  const submit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSubmitted(true);
    if (!trimmedName) return;
    onSave({ name: trimmedName, language, emailNotifications });
  };

  return (
    <form
      onSubmit={submit}
      noValidate
      style={{
        display: 'grid',
        gap: '16px',
        maxWidth: '420px',
        fontFamily: 'var(--jx-font-sans)',
      }}
    >
      <JxInputField
        label="Имя"
        name="name"
        required
        autoComplete="name"
        placeholder="Как к вам обращаться"
        value={name}
        onChange={(event) => setName(event.target.value)}
        errorText={nameError}
      />

      <JxSelect
        label="Язык интерфейса"
        placeholder="Выберите язык"
        options={languages}
        value={language}
        onValueChange={setLanguage}
      />

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

      <div style={{ display: 'flex', gap: '8px' }}>
        <JxButton type="submit" variant="primary">
          Сохранить
        </JxButton>
      </div>
    </form>
  );
}