announcement and criticisms and wallet and learning and setting
This commit is contained in:
hamid zarghami
@@ -0,0 +1,210 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Tabs from '../../components/Tabs'
|
||||
import { KeySquare, Notification1 } from 'iconsax-react'
|
||||
import SwitchComponent from '../../components/Switch'
|
||||
import Input from '../../components/Input'
|
||||
import Button from '../../components/Button'
|
||||
|
||||
const Setting: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
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 p-8 rounded-3xl'>
|
||||
<div>
|
||||
{t('setting.setting_email_message')}
|
||||
</div>
|
||||
|
||||
<div className='flex gap-6 text-sm mt-8'>
|
||||
<div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
|
||||
<div>
|
||||
{t('setting.notification_announcement')}
|
||||
</div>
|
||||
<div className='flex gap-4'>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
<div>
|
||||
{t('setting.email')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<SwitchComponent
|
||||
active={false}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
<div>
|
||||
{t('setting.sms')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
|
||||
<div>
|
||||
{t('setting.notification_announcement')}
|
||||
</div>
|
||||
<div className='flex gap-4'>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
<div>
|
||||
{t('setting.email')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<SwitchComponent
|
||||
active={false}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
<div>
|
||||
{t('setting.sms')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-6 text-sm mt-6'>
|
||||
<div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
|
||||
<div>
|
||||
{t('setting.notification_announcement')}
|
||||
</div>
|
||||
<div className='flex gap-4'>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
<div>
|
||||
{t('setting.email')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<SwitchComponent
|
||||
active={false}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
<div>
|
||||
{t('setting.sms')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
|
||||
<div>
|
||||
{t('setting.notification_announcement')}
|
||||
</div>
|
||||
<div className='flex gap-4'>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
<div>
|
||||
{t('setting.email')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<SwitchComponent
|
||||
active={false}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
<div>
|
||||
{t('setting.sms')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className='mt-10 bg-white p-8 rounded-3xl'>
|
||||
<div>
|
||||
{t('setting.change_password')}
|
||||
</div>
|
||||
|
||||
<div className='flex gap-10'>
|
||||
<div className='flex-1'>
|
||||
<Input
|
||||
type='password'
|
||||
className='mt-6'
|
||||
placeholder={t('setting.current_password')}
|
||||
/>
|
||||
<Input
|
||||
type='password'
|
||||
className='mt-6'
|
||||
placeholder={t('setting.new_password')}
|
||||
/>
|
||||
<Input
|
||||
type='password'
|
||||
className='mt-6'
|
||||
placeholder={t('setting.reapeat_password')}
|
||||
/>
|
||||
|
||||
<div className='mt-9'>
|
||||
<Button
|
||||
label={t('setting.save_change')}
|
||||
className='w-32'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex-1 p-8 bg-[#EEF0F7] rounded-3xl text-sm'>
|
||||
<div>
|
||||
{t('setting.password_is')}
|
||||
</div>
|
||||
<ul className='list-disc ps-4 flex flex-col gap-2 text-xs mt-4'>
|
||||
<li>
|
||||
{t('setting.min-8')}
|
||||
</li>
|
||||
<li>
|
||||
{t('setting.mix_charachter_number')}
|
||||
</li>
|
||||
<li>
|
||||
{t('setting.exsist_number')}
|
||||
</li>
|
||||
<li>
|
||||
{t('setting.exsist_special_character')}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Setting
|
||||
Reference in New Issue
Block a user