hamid zarghami
131 lines
5.4 KiB
TypeScript
131 lines
5.4 KiB
TypeScript
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 |