diff --git a/package.json b/package.json index 53f0148..9f66338 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "react-multi-date-picker": "^4.5.2", "react-router-dom": "^7.5.2", "react-spinners": "^0.17.0", + "swiper": "^11.2.6", "tailwind-merge": "^3.2.0", "tailwindcss": "^4.1.4", "vite-tsconfig-paths": "^5.1.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f882002..d93b448 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,9 @@ importers: react-spinners: specifier: ^0.17.0 version: 0.17.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + swiper: + specifier: ^11.2.6 + version: 11.2.6 tailwind-merge: specifier: ^3.2.0 version: 3.2.0 @@ -1304,6 +1307,10 @@ packages: resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} engines: {node: '>=8'} + swiper@11.2.6: + resolution: {integrity: sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==} + engines: {node: '>= 4.7.0'} + tailwind-merge@3.2.0: resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==} @@ -2554,6 +2561,8 @@ snapshots: dependencies: has-flag: 4.0.0 + swiper@11.2.6: {} + tailwind-merge@3.2.0: {} tailwindcss@4.1.4: {} diff --git a/src/App.tsx b/src/App.tsx index 17f0852..cd08544 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import { FC } from 'react' import './assets/fonts/irancell/style.css' import 'react-loading-skeleton/dist/skeleton.css' +import 'swiper/swiper-bundle.css'; import { BrowserRouter } from 'react-router-dom' import Main from './shared/Main' import i18next from 'i18next' diff --git a/src/assets/images/logo-small.svg b/src/assets/images/logo-small.svg new file mode 100644 index 0000000..af5e4f3 --- /dev/null +++ b/src/assets/images/logo-small.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx new file mode 100644 index 0000000..4385905 --- /dev/null +++ b/src/components/Tabs.tsx @@ -0,0 +1,50 @@ +import { FC, ReactNode } from 'react' +import { clx } from '../helpers/utils' +import { Swiper, SwiperSlide } from 'swiper/react' + +type Item = { + icon: ReactNode, + label: string, + value: string, +} + +type Props = { + items: Item[], + onChange: (value: string) => void, + active: string, +} + +const Tabs: FC = (props: Props) => { + + const SWIPER_SLIDE_STYLE = { + overflow: 'visible !important', + display: 'flex', + } + + return ( + + { + props.items.map((item: Item, index: number) => { + return ( + props.onChange(item.value)} key={item.value} className={clx( + 'flex flex-col max-w-fit mt-[15px] items-center gap-2 cursor-pointer', + index === 0 && 'pr-[30px]', + index === props.items.length - 1 && props.items.length > 3 && 'pl-[5px]', + props.active === item.value && 'text-black' + )}> + {item.icon} +
+ {item.label} +
+ + ) + }) + } + + ) +} + +export default Tabs \ No newline at end of file diff --git a/src/langs/fa.json b/src/langs/fa.json index dbb2662..adc1e29 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -23,5 +23,12 @@ "to_date": "تا تاریخ", "all": "همه", "search": "جستجو" + }, + "setting": { + "title": "تنظیمات", + "personality": "شخصی سازی", + "mail_server": "تنظیمات میل سرور", + "domain": "تنظیمات دامنه", + "address": "نشانی ها" } } diff --git a/src/pages/setting/Setting.tsx b/src/pages/setting/Setting.tsx new file mode 100644 index 0000000..8addfa0 --- /dev/null +++ b/src/pages/setting/Setting.tsx @@ -0,0 +1,55 @@ +import Tabs from '@/components/Tabs' +import { Brush2, Global, People, Setting3 } from 'iconsax-react' +import { FC, useState } from 'react' +import { useTranslation } from 'react-i18next' +import { SettingTabEnum } from './enum/SettingEnum' +import Personality from './personality/Personality' + +const Setting: FC = () => { + const { t } = useTranslation() + const [activeTab, setActiveTab] = useState(SettingTabEnum.SETTING_PERSONALITY) + return ( +
+

{t('setting.title')}

+ +
+ , + label: t('setting.personality'), + value: SettingTabEnum.SETTING_MAIL_SERVER + }, + { + icon: , + label: t('setting.mail_server'), + value: SettingTabEnum.SETTING_DOMAIN + }, + { + icon: , + label: t('setting.domain'), + value: SettingTabEnum.SETTING_ADDRESS + }, + { + icon: , + label: t('setting.address'), + value: SettingTabEnum.SETTING_PERSONALITY + } + ]} + active={activeTab} + onChange={(value) => setActiveTab(value as SettingTabEnum)} + /> +
+ +
+ { + activeTab === SettingTabEnum.SETTING_PERSONALITY ? + + : null + } +
+
+ ) +} + +export default Setting \ No newline at end of file diff --git a/src/pages/setting/enum/SettingEnum.ts b/src/pages/setting/enum/SettingEnum.ts new file mode 100644 index 0000000..8a36ee6 --- /dev/null +++ b/src/pages/setting/enum/SettingEnum.ts @@ -0,0 +1,6 @@ +export enum SettingTabEnum { + SETTING_MAIL_SERVER = "setting_mail_server", + SETTING_DOMAIN = "setting_domain", + SETTING_ADDRESS = "setting_address", + SETTING_PERSONALITY = "setting_personality", +} diff --git a/src/pages/setting/personality/Personality.tsx b/src/pages/setting/personality/Personality.tsx new file mode 100644 index 0000000..a52655d --- /dev/null +++ b/src/pages/setting/personality/Personality.tsx @@ -0,0 +1,15 @@ +import { FC } from 'react' +import Setting from './Setting' +const Personality: FC = () => { + return ( +
+
+ +
+ + +
+ ) +} + +export default Personality \ No newline at end of file diff --git a/src/pages/setting/personality/Setting.tsx b/src/pages/setting/personality/Setting.tsx new file mode 100644 index 0000000..81452a5 --- /dev/null +++ b/src/pages/setting/personality/Setting.tsx @@ -0,0 +1,31 @@ +import { FC } from 'react' +import Logo from '@/assets/images/logo-small.svg' +import { Gallery, LinkSquare, Setting4, Shapes, Text } from 'iconsax-react' +import { useTranslation } from 'react-i18next' + +const Setting: FC = () => { + + const { t } = useTranslation() + + return ( +
+
+
+ {t('setting.title')} +
+
+
+ +
+ + + + + +
+
+
+ ) +} + +export default Setting \ No newline at end of file diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx index a5c9d0f..c61934e 100644 --- a/src/router/AppRouter.tsx +++ b/src/router/AppRouter.tsx @@ -3,12 +3,13 @@ import { Paths } from '@/utils/Paths' import { Routes, Route } from 'react-router-dom' import Home from '@/pages/home/Home' import ReceivedList from '@/pages/received/List' - +import Setting from '@/pages/setting/Setting' const AppRouter: FC = () => { return ( } /> } /> + } /> ) }