settiig

2025-06-01 10:05:15 +03:30
parent a88a593ddf
commit c86e6b05e0
13 changed files with 432 additions and 19 deletions
@@ -0,0 +1,131 @@
+import { FC, Fragment, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Tabs from '../../components/Tabs'
+import { KeySquare, Notification1 } from 'iconsax-react'
+// import { useGetSettings } from './hooks/useSettingData'
+// import PageLoading from '../../components/PageLoading'
+import Sms from './components/Sms'
+import ChangePassword from './components/ChangePassword'
+import TitleLine from '../../components/TitleLine'
+
+// داده‌های استاتیک برای نمایش در صفحه
+const mockSettings = {
+    data: {
+        settings: [
+            {
+                id: '1',
+                category: 'activity_notifications',
+                settings: [
+                    {
+                        id: '101',
+                        description: 'اطلاع‌رسانی فعالیت‌های جدید',
+                        isActive: true
+                    },
+                    {
+                        id: '102',
+                        description: 'اعلان‌های مربوط به تیکت‌ها',
+                        isActive: false
+                    }
+                ]
+            },
+            {
+                id: '2',
+                category: 'system_notifications',
+                settings: [
+                    {
+                        id: '201',
+                        description: 'به‌روزرسانی‌های سیستم',
+                        isActive: true
+                    },
+                    {
+                        id: '202',
+                        description: 'اخبار و اطلاعیه‌ها',
+                        isActive: true
+                    }
+                ]
+            }
+        ]
+    }
+};
+
+const Setting: FC = () => {
+
+    const { t } = useTranslation('global')
+    // const getSettings = useGetSettings()
+    const [activeTab, setActiveTab] = useState<string>('notification')
+
+    return (
+        <div className='mt-4'>
+            <div>
+                {t('setting.setting')}
+            </div>
+
+            <div className='mt-10'>
+                <Tabs
+                    items={[
+                        {
+                            icon: <Notification1 color={activeTab === 'notification' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('setting.notification'),
+                            value: 'notification'
+                        },
+                        {
+                            icon: <KeySquare color={activeTab === 'password' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('setting.password'),
+                            value: 'password'
+                        },
+                    ]}
+                    active={activeTab}
+                    onChange={setActiveTab}
+                />
+            </div>
+
+            {
+                activeTab === 'notification' ?
+                    <div className='mt-10 bg-white xl:p-8 p-4 rounded-3xl'>
+                        <div>
+                            {t('setting.setting_email_message')}
+                        </div>
+
+                        <div className='flex xl:flex-row flex-wrap flex-col gap-6 text-sm mt-8'>
+                            {
+                                mockSettings.data.settings.map((item: any) => {
+                                    return (
+                                        <Fragment key={item.id}>
+                                            <TitleLine
+                                                title={t(`setting.${item.category}`)}
+                                            />
+                                            {
+                                                item.settings?.map((setting: any) => {
+                                                    return (
+                                                        <div key={setting.id} className='flex-1 min-w-[40%] border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
+                                                            <div className='xl:text-[13px] text-xs'>
+                                                                {setting?.description}
+                                                            </div>
+                                                            <div className='flex xl:gap-4 gap-2'>
+                                                                <div className='flex gap-2 text-xs items-center text-description'>
+                                                                    <Sms
+                                                                        sms={setting.isActive}
+                                                                        id={setting.id}
+                                                                    />
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    )
+                                                })
+                                            }
+                                        </Fragment>
+                                    )
+                                })
+                            }
+                            <div className='flex-1 px-4 min-w-[40%]'></div>
+                        </div>
+                    </div>
+                    :
+                    <ChangePassword />
+            }
+
+        </div>
+    )
+}
+
+export default Setting