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

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

settings-form__none__claude-code__claude-opus-5__1 · 23.09.2026, 19:47:52 мск

Есть проблемы
Без контекста · claude-opus-5 · Claude Code
Контекст до задачи~154
Токенов на прогон10 073
Цена$0.043
Ошибок компилятора10

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

Компилятор

  • Строка 3 · TS2724
    '"@jinx-ui/react"' has no exported member named 'Button'. Did you mean 'JxButton'?
  • Строка 4 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'Card'.
  • Строка 5 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'FormField'.
  • Строка 6 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'Input'.
  • Строка 7 · TS2724
    '"@jinx-ui/react"' has no exported member named 'Select'. Did you mean 'JxSelect'?
  • Строка 8 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'Stack'.
  • Строка 9 · TS2724
    '"@jinx-ui/react"' has no exported member named 'Switch'. Did you mean 'JxSwitch'?
  • Строка 60 · TS7006
    Parameter 'event' implicitly has an 'any' type.
  • Строка 69 · TS7006
    Parameter 'event' implicitly has an 'any' type.
  • Строка 86 · TS7006
    Parameter 'event' implicitly has an 'any' type.
Выдуманные компоненты
ButtonCardFormFieldInputSelectStackSwitch

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

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

Ни одного: код написан без библиотеки, поэтому прогон не засчитан

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

Контекст

Только формулировка задачи

Вход 2 · выход 1 471 · из кэша 8 233 · в кэш 367 · 19 с

Рендер

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

tsx100 строк
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
96
97
98
99
100
import { useState } from 'react';
import {
  Button,
  Card,
  FormField,
  Input,
  Select,
  Stack,
  Switch,
} from '@jinx-ui/react';

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

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

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

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

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

  const trimmedName = name.trim();

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

  return (
    <Card>
      <form onSubmit={handleSubmit} noValidate>
        <Stack direction="column" style={{ gap: 'var(--jx-space-4)' }}>
          <FormField label="Имя" htmlFor="profile-name">
            <Input
              id="profile-name"
              name="name"
              value={name}
              autoComplete="name"
              onChange={(event) => setName(event.target.value)}
            />
          </FormField>

          <FormField label="Язык интерфейса" htmlFor="profile-language">
            <Select
              id="profile-language"
              name="language"
              value={language}
              onChange={(event) =>
                setLanguage(event.target.value as Language)
              }
            >
              {LANGUAGE_OPTIONS.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </Select>
          </FormField>

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

          <Button type="submit" variant="primary" disabled={!trimmedName}>
            Сохранить
          </Button>
        </Stack>
      </form>
    </Card>
  );
}

export default ProfileSettingsForm;