Correct UI State

components/ui/Modal/Modal.tsx

@@ -2,21 +2,21 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Modal.module.css'
 import { useDialog } from '@react-aria/dialog'
-import { useOverlay, useModal } from '@react-aria/overlays'
 import { FocusScope } from '@react-aria/focus'
-
+import { Transition } from '@headlessui/react'
+import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
 interface Props {
   className?: string
   children?: any
-  show?: boolean
-  close: () => void
+  open?: boolean
+  onClose?: () => void
 }
 
 const Modal: FC<Props> = ({
   className,
   children,
-  show = true,
-  close,
+  open = false,
+  onClose,
   ...props
 }) => {
   const rootClassName = cn(s.root, className)
@@ -26,19 +26,32 @@ const Modal: FC<Props> = ({
   let { dialogProps } = useDialog(props, ref)
 
   return (
-    <div className={rootClassName}>
-      <FocusScope contain restoreFocus autoFocus>
-        <div
-          {...overlayProps}
-          {...dialogProps}
-          {...modalProps}
-          ref={ref}
-          className={s.modal}
-        >
-          {children}
+    <Transition show={open}>
+      <OverlayContainer>
+        <div className={rootClassName} onClick={onClose}>
+          <FocusScope contain restoreFocus autoFocus>
+            <Transition.Child
+              enter="transition-opacity ease-linear duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="transition-opacity ease-linear duration-300"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div
+                {...overlayProps}
+                {...dialogProps}
+                {...modalProps}
+                ref={ref}
+                className={s.modal}
+              >
+                {children}
+              </div>
+            </Transition.Child>
+          </FocusScope>
         </div>
-      </FocusScope>
-    </div>
+      </OverlayContainer>
+    </Transition>
   )
 }