settign structure

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",

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: {}

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'

src/assets/images/logo-small.svg

@@ -0,0 +1,13 @@
+<svg width="39" height="54" viewBox="0 0 39 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.1559 34.8412C31.1559 34.8412 24.6651 41.094 19.2416 46.3804V53.5924C18.6935 54.0179 38.4905 34.8845 38.4905 34.8845L19.2416 14.6909V22.3573L31.1559 34.8412Z" fill="#1D1D1B"/>
+<path d="M19.1479 39.0818L0 18.643L0.237992 18.405L19.3931 38.8583L19.1479 39.0818Z" fill="#1D1D1B"/>
+<path d="M19.1407 37.1635L1.75977 18.6719L1.99776 18.4412L19.3787 36.9399L19.1407 37.1635Z" fill="#1D1D1B"/>
+<path d="M19.1334 35.2523L3.52661 18.708L3.7574 18.47L19.3786 35.0215L19.1334 35.2523Z" fill="#1D1D1B"/>
+<path d="M19.1262 33.3337L5.28638 18.7366L5.50995 18.5059L19.3714 33.1029L19.1262 33.3337Z" fill="#1D1D1B"/>
+<path d="M19.1191 31.4155L7.05347 18.7729L7.26982 18.5349L19.3571 31.1848L19.1191 31.4155Z" fill="#1D1D1B"/>
+<path d="M0.375071 18.7368L0.144287 18.4988L19.1407 0L19.3715 0.237996L0.375071 18.7368Z" fill="#1D1D1B"/>
+<path d="M2.15645 18.7442L1.91846 18.5134L19.1263 1.73828L19.3571 1.97628L2.15645 18.7442Z" fill="#1D1D1B"/>
+<path d="M3.93049 18.7587L3.69971 18.5279L19.1117 3.48364L19.3425 3.71443L3.93049 18.7587Z" fill="#1D1D1B"/>
+<path d="M5.71187 18.7658L5.47388 18.5422L19.0973 5.22168L19.3281 5.45968L5.71187 18.7658Z" fill="#1D1D1B"/>
+<path d="M7.49326 18.7799L7.24805 18.5564L19.0901 6.95947L19.3137 7.19747L7.49326 18.7799Z" fill="#1D1D1B"/>
+</svg>

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: Props) => {
+
+    const SWIPER_SLIDE_STYLE = {
+        overflow: 'visible !important',
+        display: 'flex',
+    }
+
+    return (
+        <Swiper
+            slidesPerView='auto'
+            spaceBetween={30}
+            className='px-10 max-w-full w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[80px] rounded-[32px] bg-white bg-opacity-45'>
+            {
+                props.items.map((item: Item, index: number) => {
+                    return (
+                        <SwiperSlide style={SWIPER_SLIDE_STYLE} onClick={() => 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}
+                            <div className='text-xs'>
+                                {item.label}
+                            </div>
+                        </SwiperSlide>
+                    )
+                })
+            }
+        </Swiper>
+    )
+}
+
+export default Tabs

src/langs/fa.json

@@ -23,5 +23,12 @@
     "to_date": "تا تاریخ",
     "all": "همه",
     "search": "جستجو"
+  },
+  "setting": {
+    "title": "تنظیمات",
+    "personality": "شخصی سازی",
+    "mail_server": "تنظیمات میل سرور",
+    "domain": "تنظیمات دامنه",
+    "address": "نشانی ها"
   }
 }

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>(SettingTabEnum.SETTING_PERSONALITY)
+    return (
+        <div className='mt-4'>
+            <h1>{t('setting.title')}</h1>
+
+            <div className='mt-7'>
+                <Tabs
+                    items={[
+                        {
+                            icon: <Setting3 size={22} color={activeTab === SettingTabEnum.SETTING_MAIL_SERVER ? 'black' : '#8C90A3'} />,
+                            label: t('setting.personality'),
+                            value: SettingTabEnum.SETTING_MAIL_SERVER
+                        },
+                        {
+                            icon: <Global size={22} color={activeTab === SettingTabEnum.SETTING_DOMAIN ? 'black' : '#8C90A3'} />,
+                            label: t('setting.mail_server'),
+                            value: SettingTabEnum.SETTING_DOMAIN
+                        },
+                        {
+                            icon: <People size={22} color={activeTab === SettingTabEnum.SETTING_ADDRESS ? 'black' : '#8C90A3'} />,
+                            label: t('setting.domain'),
+                            value: SettingTabEnum.SETTING_ADDRESS
+                        },
+                        {
+                            icon: <Brush2 size={22} color={activeTab === SettingTabEnum.SETTING_PERSONALITY ? 'black' : '#8C90A3'} />,
+                            label: t('setting.address'),
+                            value: SettingTabEnum.SETTING_PERSONALITY
+                        }
+                    ]}
+                    active={activeTab}
+                    onChange={(value) => setActiveTab(value as SettingTabEnum)}
+                />
+            </div>
+
+            <div className='mt-10'>
+                {
+                    activeTab === SettingTabEnum.SETTING_PERSONALITY ?
+                        <Personality />
+                        : null
+                }
+            </div>
+        </div>
+    )
+}
+
+export default Setting

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",
+}

src/pages/setting/personality/Personality.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+import Setting from './Setting'
+const Personality: FC = () => {
+    return (
+        <div className='flex gap-8'>
+            <div className='flex-1 bg-white rounded-4xl p-8'>
+
+            </div>
+
+            <Setting />
+        </div>
+    )
+}
+
+export default Personality

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 (
+        <div className='flex-1 bg-white rounded-4xl p-8 max-w-[400px] flex'>
+            <div className='flex-1'>
+                <div>
+                    {t('setting.title')}
+                </div>
+            </div>
+            <div className='w-fit pr-6 flex flex-col items-end border-r border-border'>
+                <img src={Logo} className='w-8' />
+                <div className='flex flex-col gap-6 mt-14'>
+                    <Setting4 size={20} color='black' variant='Bold' />
+                    <Text size={20} color='black' />
+                    <LinkSquare size={20} color='black' />
+                    <Gallery size={20} color='black' />
+                    <Shapes size={20} color='black' />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Setting

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 (
         <Routes>
             <Route path='/' element={<Home />} />
             <Route path={Paths.received} element={<ReceivedList />} />
+            <Route path={Paths.setting} element={<Setting />} />
         </Routes>
     )
 }