new message

package.json

@@ -17,12 +17,15 @@
     "i18next": "^25.0.1",
     "iconsax-react": "^0.0.8",
     "lucide-react": "^0.511.0",
+    "quill": "^2.0.3",
     "react": "^19.0.0",
     "react-date-object": "^2.1.9",
     "react-dom": "^19.0.0",
     "react-i18next": "^15.5.1",
     "react-loading-skeleton": "^3.5.0",
     "react-multi-date-picker": "^4.5.2",
+    "react-quill": "^2.0.0",
+    "react-quill-new": "^3.4.6",
     "react-router-dom": "^7.5.2",
     "react-spinners": "^0.17.0",
     "swiper": "^11.2.6",

src/App.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import './assets/fonts/irancell/style.css'
+import 'react-quill-new/dist/quill.snow.css';
 import 'react-loading-skeleton/dist/skeleton.css'
 import 'swiper/swiper-bundle.css';
 import { BrowserRouter } from 'react-router-dom'
@@ -7,6 +8,7 @@ import Main from './shared/Main'
 import i18next from 'i18next'
 import FaJson from './langs/fa.json'
 import { I18nextProvider } from 'react-i18next'
+import NewMessage from './components/newMessage/NewMessage';
 i18next.init({
   interpolation: { escapeValue: false },
   lng: 'fa',
@@ -23,6 +25,7 @@ const App: FC = () => {
     <BrowserRouter>
       <I18nextProvider i18n={i18next}>
         <Main />
+        <NewMessage />
       </I18nextProvider>
     </BrowserRouter>
   )

src/components/newMessage/NewMessage.tsx

@@ -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

src/index.css

@@ -198,3 +198,16 @@ td {
     @apply bg-background text-foreground;
   }
 }
+
+.ql-container {
+  @apply rounded-b-xl text-right;
+  font-family: irancell !important;
+  direction: rtl;
+  min-height: 100px !important;
+}
+.ql-toolbar {
+  @apply rounded-t-xl;
+}
+.ql-editor {
+  @apply !text-right;
+}

src/langs/fa.json

@@ -37,5 +37,16 @@
     "mail_server": "تنظیمات میل سرور",
     "domain": "تنظیمات دامنه",
     "address": "نشانی ها"
+  },
+  "new_message": {
+    "title": "ارسال پیام جدید",
+    "to": "ارسال به",
+    "subject": "موضوع",
+    "message": "پیام",
+    "send": "ارسال",
+    "draft": "پیش نویس",
+    "recipients_placeholder": "نام گیرنده",
+    "subject_placeholder": "موضوع پیام",
+    "message_placeholder": "متن پیام"
   }
 }

src/locales/fa.json

@@ -0,0 +1,25 @@
+{
+  "sidebar": {
+    "menu": "منو",
+    "received": "دریافتی‌ها",
+    "sent": "ارسال شده‌ها",
+    "draft": "پیش‌نویس‌ها",
+    "archive": "آرشیو",
+    "trash": "سطل زباله",
+    "other": "سایر",
+    "favorite": "مورد علاقه",
+    "spam": "اسپم",
+    "setting": "تنظیمات",
+    "logout": "خروج",
+    "new_message": "پیام جدید"
+  },
+  "new_message": {
+    "title": "پیام جدید",
+    "to": "به:",
+    "recipients_placeholder": "گیرندگان را وارد کنید",
+    "subject": "موضوع:",
+    "subject_placeholder": "موضوع پیام را وارد کنید",
+    "message_placeholder": "متن پیام خود را بنویسید...",
+    "send": "ارسال"
+  }
+}

src/shared/SideBar.tsx

@@ -14,6 +14,7 @@ const SideBar: FC = () => {
     const { t } = useTranslation()
     const { openSidebar, setOpenSidebar } = useSharedStore()
     const location = useLocation()
+    const { setOpenNewMessage } = useSharedStore()
 
     const isActive = (path: string) => location.pathname === path
 
@@ -37,6 +38,7 @@ const SideBar: FC = () => {
                 <div className='flex justify-center mt-14'>
                     <Button
                         className='bg-secondary font-normal text-primary w-fit px-6'
+                        onClick={() => setOpenNewMessage(true)}
                     >
                         <div className='flex gap-2'>
                             <Add size={20} color='black' />

src/shared/store/sharedStore.ts

@@ -4,4 +4,6 @@ import { SharedStoreType } from "../types/SharedTypes";
 export const useSharedStore = create<SharedStoreType>((set) => ({
   openSidebar: false,
   setOpenSidebar: (value) => set({ openSidebar: value }),
+  openNewMessage: false,
+  setOpenNewMessage: (value) => set({ openNewMessage: value }),
 }));

src/shared/types/SharedTypes.ts

@@ -1,4 +1,6 @@
 export type SharedStoreType = {
   openSidebar: boolean;
   setOpenSidebar: (value: boolean) => void;
+  openNewMessage: boolean;
+  setOpenNewMessage: (value: boolean) => void;
 };