61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import { Button, Card, Group, Modal } from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
import { cardClasses, modalClasses } from 'styles';
|
|
|
|
function DeleteItemModal({
|
|
modalOpened,
|
|
handleClose,
|
|
handleDelete,
|
|
body,
|
|
title,
|
|
}: {
|
|
modalOpened: boolean;
|
|
handleClose: () => void;
|
|
handleDelete: () => void;
|
|
body: React.ReactNode;
|
|
title: string;
|
|
}) {
|
|
const { isMobile } = useCommonHooks();
|
|
return (
|
|
<Modal.Root
|
|
size={'60%'}
|
|
className={modalClasses.helpModal}
|
|
classNames={modalClasses}
|
|
opened={modalOpened}
|
|
fullScreen={isMobile}
|
|
onClose={handleClose}
|
|
closeOnEscape
|
|
closeOnClickOutside
|
|
centered
|
|
>
|
|
<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} />
|
|
<Modal.Content style={{ zIndex: 1000 }} h={'auto'}>
|
|
<Modal.Header>
|
|
<Modal.Title>{title}</Modal.Title>
|
|
<Modal.CloseButton />
|
|
</Modal.Header>
|
|
<Modal.Body pb={'2rem'}>
|
|
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
|
{body}
|
|
<Group justify='center' mt={'-1.5rem'}>
|
|
<Button
|
|
color={'red'}
|
|
styles={{ label: { color: 'black' } }}
|
|
onClick={() => {
|
|
handleDelete();
|
|
handleClose();
|
|
}}
|
|
>
|
|
Delete
|
|
</Button>
|
|
<Button onClick={handleClose}>Cancel</Button>
|
|
</Group>
|
|
</Card>
|
|
</Modal.Body>
|
|
</Modal.Content>
|
|
</Modal.Root>
|
|
);
|
|
}
|
|
|
|
export default DeleteItemModal;
|