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

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

settings-form__readme__claude-code__claude-opus-5__1 · 23.09.2026, 20:01:08 мск

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

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

Компилятор

  • Строка 2 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'JxInput'.
  • Строка 60 · TS4104
    The type 'readonly { value: Language; label: string; }[]' is 'readonly' and cannot be assigned to the mutable type 'JxSelectOption[]'.
  • Строка 66 · TS2322
    Type '{ label: string; checked: boolean; onCheckedChange: Dispatch<SetStateAction<boolean>>; }' is not assignable to type 'IntrinsicAttributes & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & { ref?: Ref<HTMLInputElement> | undefined; label?: ReactNode; wrapClassName?: string | undefined; }'.
Выдуманные компоненты
JxInput
Выдуманные пропсы
JxSwitch.onCheckedChange

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

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

JxButton, JxInput, JxSelect, JxSwitch

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

Контекст

README (README.md, ~644)

Вход 2 · выход 1 370 · из кэша 8 233 · в кэш 1 303 · 16 с

Рендер

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

tsx74 строки
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
import { useState, type FormEvent } from 'react';
import { JxButton, JxInput, JxSelect, JxSwitch } from '@jinx-ui/react';

// Названия JxInput/JxSelect/JxSwitch и их пропсы взяты по соглашению value/onValueChange — сверьте с версией пакета.

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: ReadonlyArray<{ value: Language; label: string }> = [
  { value: 'ru', label: 'Русский' },
  { value: 'en', label: 'Английский' },
];

export default 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();

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

  return (
    <form
      className="jx-stack"
      style={{ gap: 'var(--jx-space-4)' }}
      onSubmit={handleSubmit}
    >
      <JxInput
        label="Имя"
        value={name}
        onValueChange={setName}
        placeholder="Введите имя"
        required
      />

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

      <JxSwitch
        label="Уведомления на почту"
        checked={emailNotifications}
        onCheckedChange={setEmailNotifications}
      />

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