diff --git a/src/assets/images/answer.svg b/src/assets/images/answer.svg new file mode 100644 index 0000000..9d4e010 --- /dev/null +++ b/src/assets/images/answer.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/avatar.svg b/src/assets/images/avatar.svg new file mode 100644 index 0000000..9142ee2 --- /dev/null +++ b/src/assets/images/avatar.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/images/forward.svg b/src/assets/images/forward.svg new file mode 100644 index 0000000..8207904 --- /dev/null +++ b/src/assets/images/forward.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Button.tsx b/src/components/Button.tsx index f6c9478..84e3a15 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -9,12 +9,14 @@ interface ButtonProps { onClick?: () => void; type?: 'button' | 'submit' | 'reset'; disabled?: boolean; + variant?: 'primary' | 'secondary' } const Button: FC = (props) => { const buttonClass = clx( 'w-full bg-primary text-white rounded-xl font-normal text-xs md:text-sm h-10 px-3 md:px-4 transition-all duration-200 hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed', + props.variant === 'secondary' && 'bg-[#ECEEF5] text-black', props.className ) diff --git a/src/components/Radio.tsx b/src/components/Radio.tsx new file mode 100644 index 0000000..4f7dcdc --- /dev/null +++ b/src/components/Radio.tsx @@ -0,0 +1,20 @@ +import { FC } from 'react' + +type Props = { + isActive: boolean, + value: string, + onChange: (value: string) => void +} + +const Radio: FC = (props: Props) => { + return ( +
props.onChange(props.value)} className='size-4 cursor-pointer rounded-full bg-[#EAEDF5] flex justify-center items-center'> + { + props.isActive && +
+ } +
+ ) +} + +export default Radio \ No newline at end of file diff --git a/src/components/RadioGroup.tsx b/src/components/RadioGroup.tsx new file mode 100644 index 0000000..0421109 --- /dev/null +++ b/src/components/RadioGroup.tsx @@ -0,0 +1,31 @@ +import { FC } from 'react' +import Radio from './Radio' + + +type Props = { + items: { + label: string + value: string + }[] + selected: string + onChange: (value: string) => void +} + +const RadioGroup: FC = (props: Props) => { + return ( +
+ { + props.items.map((item, index) => ( +
+ +
+ {item.label} +
+
+ )) + } +
+ ) +} + +export default RadioGroup \ No newline at end of file diff --git a/src/langs/fa.json b/src/langs/fa.json index 00fd06f..3610cfc 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -84,7 +84,15 @@ "add_button": "اضافه کردن دکمه", "image": "تصویر", "upload_image": "تصویر مورد نظر را آپلود کنید", - "add_image": "اضافه کردن تصویر" + "add_image": "اضافه کردن تصویر", + "setting_fetch": "تنظیمات فچ", + "setting_fetch_description": "تنظیمات فچ خود را با دقت انتخاب کنید.", + "setting_smtp": "تنظیمات SMTP", + "setting_smtp_description": "تنظیمات SMTP خود را با دقت وارد کنید.", + "smtp_server": "SMTP سرور", + "smtp_port": "SMTP پورت", + "username": "نام کاربری", + "password": "پسورد" }, "upload": "آپلود", "new_message": { @@ -98,5 +106,14 @@ "subject_placeholder": "موضوع پیام", "message_placeholder": "متن پیام", "select_priority": "انتخاب اولویت" + }, + "mail": { + "download": "دانلود", + "print": "چاپ", + "subject": "موضوع : ", + "attachments": "فایل های ضمیمه", + "answer": "پاسخ", + "forward": "ارسال به دیگران", + "message": "متن پبام" } } diff --git a/src/pages/received/Components/Header.tsx b/src/pages/received/Components/Header.tsx new file mode 100644 index 0000000..ccc9c2e --- /dev/null +++ b/src/pages/received/Components/Header.tsx @@ -0,0 +1,45 @@ +import Button from '@/components/Button' +import { ArrowRight, InfoCircle, SmsNotification, Star, VolumeMute, More, DocumentDownload, ArchiveTick, Printer, Trash } from 'iconsax-react' +import { FC } from 'react' +import { useTranslation } from 'react-i18next' + +const Header: FC = () => { + + const { t } = useTranslation() + + return ( +
+
+ + + + + + + + +
+ +
+ + +
+
+ ) +} + +export default Header \ No newline at end of file diff --git a/src/pages/received/Detail.tsx b/src/pages/received/Detail.tsx new file mode 100644 index 0000000..6616e7c --- /dev/null +++ b/src/pages/received/Detail.tsx @@ -0,0 +1,135 @@ +import Button from '@/components/Button' +import { FC, useState } from 'react' +import { useTranslation } from 'react-i18next' +import AvatarImage from '@/assets/images/avatar.svg' +import { DocumentDownload, EmojiHappy } from 'iconsax-react' +import ForwardIcon from '@/assets/images/forward.svg' +import AnswerIcon from '@/assets/images/answer.svg' +import Header from './Components/Header' +import ReactQuill from 'react-quill-new'; +import Select from '@/components/Select' + +const DetailEmail: FC = () => { + + const { t } = useTranslation() + const [showAnswer, setShowAnswer] = useState(false) + const [value, setValue] = useState('') + + return ( +
+
+ +
+
+
+
{t('mail.subject')}
+
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
+
+
+ +
+ ۵ اسفندماه ۱۴۰۳، ساعت ۱۲:۰۰ +
+
+ +
+ +
مهرداد مظفری
+
+ +

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آیندهلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده +

+ +
+ {t('mail.attachments')} +
+ +
+
+ Lorem Ipsum.pdf + +
+
+ + { + !showAnswer ? +
+
+ + +
setShowAnswer(true)} className='flex gap-2 cursor-pointer items-center border-r border-border pr-5'> + +
{t('mail.answer')}
+
+ +
+ +
{t('mail.forward')}
+
+
+
+ : +
+ +
+
+ {t('mail.message')} +
+ + +
+
+
+ { - setNewDomain(e.target.value) - setError('') - }} - className={`flex-1 px-4 py-2 border ${error ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent`} - placeholder='domain.com' - /> - -
- {error &&

{error}

} -
- -
-

{t('setting.your_domains')}

-
- {domains.map((domain, index) => ( -
-
-

{domain}

-

- {index === 0 ? t('setting.primary_domain') : t('setting.additional_domain')} -

-
-
-
- {index === 0 ? t('setting.verified') : t('setting.pending')} -
- {index !== 0 && ( - - )} -
+
+
+
+
+
+ {t('setting.setting_fetch')}
- ))} +
+ {t('setting.setting_fetch_description')} +
+
+
+ null} + selected='1' + /> +
+
+
+
+
+ {t('setting.setting_smtp')} +
+
+ {t('setting.setting_smtp_description')} +
+
-
-

{t('setting.dns_records')}

-

{t('setting.dns_instructions')}

- -
-
-
{t('setting.type')}
-
{t('setting.hostname')}
-
{t('setting.value')}
-
-
-
MX
-
@
-
mail.example.com
-
-
-
TXT
-
@
-
v=spf1 include:spf.example.com ~all
-
-
-
CNAME
-
mail
-
mailserver.example.com
+
+ +
+ +
+
+ +
+
+ +
@@ -125,4 +76,4 @@ const Domain: FC = () => { ) } -export default Domain \ No newline at end of file +export default Domain \ No newline at end of file diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx index 6acddc3..69155e0 100644 --- a/src/router/AppRouter.tsx +++ b/src/router/AppRouter.tsx @@ -8,6 +8,7 @@ import SentList from '@/pages/sent/List' import DraftList from '@/pages/draft/List' import ArchiveList from '@/pages/archive/List' import TrashList from '@/pages/Trash/List' +import DetailEmail from '@/pages/received/Detail' const AppRouter: FC = () => { return ( @@ -18,6 +19,7 @@ const AppRouter: FC = () => { } /> } /> } /> + } /> ) } diff --git a/src/utils/Paths.ts b/src/utils/Paths.ts index 63676d1..e774e0f 100644 --- a/src/utils/Paths.ts +++ b/src/utils/Paths.ts @@ -8,4 +8,5 @@ export const Paths = { favorite: "/favorite", spam: "/spam", setting: "/setting", + detailEmail: "/mail/", };