Подтверждение удаления

Сделай компонент с кнопкой «Удалить проект». По клику открывается окно подтверждения с заголовком «Удалить проект?», текстом о том, что действие необратимо, и двумя кнопками: отмена и подтверждение удаления. Подтверждение вызывает переданный колбэк onConfirm.

confirm-delete__none__claude-code__claude-opus-5__1 · 23.09.2026, 19:46:53 мск

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

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

Компилятор

  • Строка 3 · TS2724
    '"@jinx-ui/react"' has no exported member named 'Button'. Did you mean 'JxButton'?
  • Строка 3 · TS2724
    '"@jinx-ui/react"' has no exported member named 'Modal'. Did you mean 'JxModal'?
  • Строка 3 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'Stack'.
  • Строка 3 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'Text'.
Выдуманные компоненты
ButtonModalStackText

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

Замечаний нет.

Компоненты библиотеки

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

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

Контекст

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

Вход 2 · выход 1 528 · из кэша 8 233 · в кэш 368 · 20 с

Рендер

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

tsx43 строки
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
// API @jinx-ui/react неизвестен из контекста: имена Modal/Stack/Text и пропсы variant/gap — предположение, сверь с докой пакета.
import { useState } from 'react';
import { Button, Modal, Stack, Text } from '@jinx-ui/react';

type DeleteProjectButtonProps = {
  onConfirm: () => void;
};

export default function DeleteProjectButton({ onConfirm }: DeleteProjectButtonProps) {
  const [isOpen, setIsOpen] = useState(false);

  const close = () => setIsOpen(false);

  const handleConfirm = () => {
    close();
    onConfirm();
  };

  return (
    <>
      <Button variant="danger" onClick={() => setIsOpen(true)}>
        Удалить проект
      </Button>

      <Modal open={isOpen} onClose={close} title="Удалить проект?">
        <Stack direction="column" gap="var(--jx-space-4)">
          <Text tone="muted">
            Проект и все его данные будут удалены безвозвратно. Это действие необратимо.
          </Text>

          <Stack direction="row" gap="var(--jx-space-2)" justify="end">
            <Button variant="ghost" onClick={close}>
              Отмена
            </Button>
            <Button variant="danger" onClick={handleConfirm}>
              Удалить проект
            </Button>
          </Stack>
        </Stack>
      </Modal>
    </>
  );
}