1
 2
 3import {
 4  Button,
 5  Modal,
 6  ModalBody,
 7  ModalCloseButton,
 8  ModalContent,
 9  ModalFooter,
10  ModalHeader,
11  ModalOverlay,
12  Spinner,
13  Text,
14} from '@chakra-ui/react';
15import { FC } from 'react';
16import { Trans, useTranslation } from 'react-i18next';
17import { DeleteIcon } from 'components/dialog';
18import { Icon } from 'components/icon';
19
20type DeleteModalProps = {
21  onDelete: () => void,
22  deleteObjectPromptT: string,
23  deleteObjectTitleT: string,
24  deletingObjectName?: string,
25  isOpen: boolean,
26  onClose: () => void,
27  loading: boolean,
28}
29
30export const DeleteModal: FC<DeleteModalProps> = ({
31  onDelete,
32  isOpen,
33  onClose,
34  deletingObjectName,
35  loading,
36  deleteObjectTitleT,
37  deleteObjectPromptT
38}) => {
39  const { t } = useTranslation();
40
41  return (
42    <Modal isCentered isOpen={isOpen} onClose={onClose} size="sm">
43      <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
44      <ModalContent mx="3">
45        <ModalHeader pt={6}>
46          <Icon color="red">
47            <DeleteIcon />
48          </Icon>
49        </ModalHeader>
50        <ModalCloseButton mt={3} />
51        <ModalBody>
52          <Text fontWeight="semibold" fontSize="lg">
53            {t(deleteObjectTitleT)}
54          </Text>
55          {deletingObjectName && (
56            <Text
57              mt={1}
58              fontSize="sm"
59              _dark={{ color: 'gray.400' }}
60              color="gray.600"
61            >
62              <Trans components={{ b: <b /> }}>
63                {t(deleteObjectPromptT, { name: deletingObjectName })}
64              </Trans>
65            </Text>
66          )}
67        </ModalBody>
68        <ModalFooter display="flex">
69          <Button size="sm" onClick={onClose} mr={3} w="full" variant="outline">
70            {t('cancel')}
71          </Button>
72          <Button
73            size="sm"
74            w="full"
75            colorScheme="red"
76            onClick={() => onDelete()}
77            leftIcon={loading ? <Spinner size="xs" /> : undefined}
78          >
79            {t('delete')}
80          </Button>
81        </ModalFooter>
82      </ModalContent>
83    </Modal>
84  );
85};