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

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

settings-form__mcp__claude-code__claude-opus-5__1 · 24.09.2026, 13:23:59 мск

Проверки пройдены
MCP · claude-opus-5 · Claude Code
Контекст до задачи~2 405
Токенов на прогон31 813
Цена$0.084
Ошибок компилятора0

Первый вызов модели получил 12 489 токенов входа, включая системный промпт Claude Code; вызовов модели 2, каждый отправлял разговор заново, и самый большой получил 17 918 токенов. Контекст до задачи — оценка по длине текста, для русского текста она занижает число токенов в полтора-два раза.

Компилятор

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

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

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

JxButton, JxInputField, JxSelect, JxSwitch

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

Вызовы инструментов · 5
  1. get_rules({"task":"ui"}) → ~1247 токенов
  2. get_component_api({"name":"JxInputField"}) → ~484 токенов
  3. get_component_api({"name":"JxSelect"}) → ~563 токенов
  4. get_component_api({"name":"JxSwitch"}) → ~289 токенов
  5. get_component_api({"name":"JxButton"}) → ~539 токенов
Контекст

Инструменты (search_components,get_component_api,get_component_examples,list_design_tokens,get_docs,get_rules, ~1213)

Вход 4 · выход 1 406 · из кэша 24 502 · в кэш 5 901 · 18 с

Рендер

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

tsx95 строк
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
86
87
88
89
90
91
92
93
94
95
import { useState, type FormEvent } from 'react';
import { JxButton, JxInputField, JxSelect, JxSwitch } from '@jinx-ui/react';

export type ProfileLanguage = 'ru' | 'en';

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

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

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

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

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

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

  return (
    <form
      onSubmit={submit}
      noValidate
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 20,
        maxWidth: 420,
        padding: 24,
        background: 'var(--jx-surface)',
        border: '1px solid var(--jx-border)',
        borderRadius: 'var(--jx-r-lg)',
        boxShadow: 'var(--jx-shadow-sm)',
        fontFamily: 'var(--jx-font-sans)',
        color: 'var(--jx-text)',
      }}
    >
      <JxInputField
        label="Имя"
        name="name"
        required
        value={name}
        placeholder="Как к вам обращаться"
        onChange={(event) => setName(event.target.value)}
        errorText={nameError}
      />

      <JxSelect
        label="Язык интерфейса"
        options={LANGUAGE_OPTIONS}
        value={language}
        onValueChange={(value) => setLanguage(value as ProfileLanguage)}
      />

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

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