perf: modal

client/src/components/MyModal/index.tsx

@@ -5,19 +5,40 @@ import {
   ModalContent,
   ModalHeader,
   ModalCloseButton,
-  ModalProps
+  ModalContentProps
 } from '@chakra-ui/react';
+import { DefaultTFuncReturn } from 'i18next';
 
-interface Props extends ModalProps {
+interface Props extends ModalContentProps {
   showCloseBtn?: boolean;
-  title?: string;
+  title?: any;
+  isCentered?: boolean;
+  isOpen: boolean;
+  onClose: () => void;
 }
 
-const MyModal = ({ isOpen, onClose, title, children, showCloseBtn = true, ...props }: Props) => {
+const MyModal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  showCloseBtn = true,
+  isCentered,
+  w = 'auto',
+  maxW = ['90vw', '600px'],
+  ...props
+}: Props) => {
   return (
-    <Modal isOpen={isOpen} onClose={onClose} autoFocus={false} {...props}>
+    <Modal isOpen={isOpen} onClose={onClose} autoFocus={false} isCentered={isCentered}>
       <ModalOverlay />
-      <ModalContent>
+      <ModalContent
+        w={w}
+        minW={['300px', '400px']}
+        maxW={maxW}
+        position={'relative'}
+        overflow={'overlay'}
+        {...props}
+      >
         {!!title && <ModalHeader>{title}</ModalHeader>}
         {showCloseBtn && <ModalCloseButton />}
         {children}