new message

2025-06-07 12:03:14 +03:30
parent 6be80bbd81
commit f66f1a768e
10 changed files with 1259 additions and 651 deletions
@@ -0,0 +1,81 @@
+import { FC, useState } from 'react'
+import { CloseCircle } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import { useSharedStore } from '@/shared/store/sharedStore'
+import Input from '../Input'
+import ReactQuill from 'react-quill-new';
+import Button from '../Button'
+
+
+const NewMessage: FC = () => {
+    const { t } = useTranslation('global')
+    const [value, setValue] = useState('');
+    const { setOpenNewMessage, openNewMessage } = useSharedStore()
+    return (
+        <>
+
+            {openNewMessage && (
+                <>
+                    <div
+                        className='fixed inset-0  bg-opacity-50 z-[9998]'
+                        onClick={() => setOpenNewMessage(false)}
+                    // style={{ left: '250px' }}
+                    />
+                    <div className={`fixed left-8 bottom-4 bg-white rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] transition-all duration-300 p-8 w-[800px] `}>
+                        {/* Header */}
+                        <div className='flex justify-between items-center'>
+                            <div className=''>
+                                {t('new_message.title')}
+                            </div>
+                            <div onClick={() => setOpenNewMessage(false)}>
+                                <CloseCircle size={24} color='#292D32' />
+                            </div>
+                        </div>
+
+                        {/* Content */}
+
+                        <div className='mt-10'>
+                            <Input
+                                label={t('new_message.to')}
+                            />
+
+                            <div className='mt-8'>
+                                <Input
+                                    label={t('new_message.subject')}
+                                />
+                            </div>
+
+                            <div className='mt-8'>
+                                <ReactQuill modules={{
+                                    toolbar: [
+                                        [{ header: '1' }, { header: '2' }, { font: [] }],
+                                        [{ list: 'ordered' }, { list: 'bullet' }],
+                                        ['bold', 'italic', 'underline'],
+                                        ['link', 'image'],
+                                        [{ align: [] }],
+                                        ['clean']
+                                    ]
+                                }} theme="snow" value={value} onChange={setValue} />
+                            </div>
+
+                            <div className='mt-8 flex justify-end gap-4'>
+                                <Button
+                                    className='!w-fit px-10 bg-white text-black border border-primary'
+                                    label={t('new_message.draft')}
+                                />
+                                <Button
+                                    className='w-fit px-10'
+                                    label={t('new_message.send')}
+                                />
+                            </div>
+
+
+                        </div>
+                    </div>
+                </>
+            )}
+        </>
+    )
+}
+
+export default NewMessage