58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import { Card, Modal } from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
import type React from 'react';
|
|
import { cardClasses, modalClasses } from 'styles';
|
|
|
|
function AddItemModal({
|
|
modalOpened,
|
|
handleClose,
|
|
body,
|
|
title,
|
|
}: {
|
|
modalOpened: boolean;
|
|
handleClose: () => 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 }}>
|
|
<Modal.Header>
|
|
<Modal.Title>{title}</Modal.Title>
|
|
<Modal.CloseButton />
|
|
</Modal.Header>
|
|
<Modal.Body
|
|
h={isMobile ? '90%' : undefined}
|
|
style={{
|
|
justifyContent: 'center',
|
|
alignContent: 'center',
|
|
paddingBottom: '2rem',
|
|
}}
|
|
>
|
|
<Card
|
|
style={{ alignContent: 'center', justifyContent: 'center' }}
|
|
className={cardClasses.settingsItem}
|
|
classNames={cardClasses}
|
|
>
|
|
{body}
|
|
</Card>
|
|
</Modal.Body>
|
|
</Modal.Content>
|
|
</Modal.Root>
|
|
);
|
|
}
|
|
|
|
export default AddItemModal;
|