table like gmail and openn and close new messsage with animation +...

src/components/newMessage/NewMessage.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useState, useEffect } from 'react'
 import { CloseCircle } from 'iconsax-react'
 import { useTranslation } from 'react-i18next'
 import { useSharedStore } from '@/shared/store/sharedStore'
@@ -12,22 +12,53 @@ const NewMessage: FC = () => {
     const { t } = useTranslation('global')
     const [value, setValue] = useState('');
     const { setOpenNewMessage, openNewMessage } = useSharedStore()
+    const [isClosing, setIsClosing] = useState(false)
+    const [shouldRender, setShouldRender] = useState(false)
+    const [isOpening, setIsOpening] = useState(false)
+
+    useEffect(() => {
+        if (openNewMessage) {
+            setShouldRender(true)
+            setIsClosing(false)
+            setIsOpening(true)
+            // شروع انیمیشن باز شدن بعد از رندر
+            setTimeout(() => {
+                setIsOpening(false)
+            }, 50)
+        } else if (shouldRender) {
+            setIsClosing(true)
+            const timer = setTimeout(() => {
+                setShouldRender(false)
+                setIsClosing(false)
+            }, 300)
+            return () => clearTimeout(timer)
+        }
+    }, [openNewMessage, shouldRender])
+
+    const handleClose = () => {
+        setIsClosing(true)
+        setTimeout(() => {
+            setOpenNewMessage(false)
+        }, 300)
+    }
     return (
         <>
 
-            {openNewMessage && (
+            {shouldRender && (
                 <>
                     <div
-                        className='fixed inset-0 xl:bg-transparent bg-black/50 z-[9998]'
-                        onClick={() => setOpenNewMessage(false)}
+                        className={`fixed inset-0 xl:bg-transparent bg-black/50 z-[9998] transition-opacity duration-300 ${isClosing ? 'opacity-0' : isOpening ? 'opacity-0' : 'opacity-100'
+                            }`}
+                        onClick={handleClose}
                     />
-                    <div className='fixed left-2 right-2 bottom-2 md:left-4 md:right-4 md:bottom-4 xl:left-8 xl:right-auto xl:bottom-4  bg-white rounded-2xl md:rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] transition-all duration-300 p-4 md:p-6 xl:p-8 w-auto xl:w-[800px] max-h-[90vh] overflow-y-auto'>
+                    <div className={`fixed left-2 right-2 bottom-2 md:left-4 md:right-4 md:bottom-4 xl:left-8 xl:right-auto xl:bottom-4  bg-white rounded-2xl md:rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] p-4 md:p-6 xl:p-8 w-auto xl:w-[800px] max-h-[90vh] overflow-y-auto transition-transform duration-300 ease-out ${isClosing ? 'translate-y-[120%]' : isOpening ? 'translate-y-full' : 'translate-y-0'
+                        }`}>
                         {/* Header */}
                         <div className='flex justify-between items-center mb-6 md:mb-8'>
                             <div className='text-lg'>
                                 {t('new_message.title')}
                             </div>
-                            <div onClick={() => setOpenNewMessage(false)} className='cursor-pointer p-1'>
+                            <div onClick={handleClose} className='cursor-pointer p-1'>
                                 <CloseCircle size={20} className='md:w-6 md:h-6' color='#292D32' />
                             </div>
                         </div>