reponsive profile and responsive setting
This commit is contained in:
hamid zarghami
@@ -18,8 +18,8 @@ const Profile: FC = () => {
|
||||
{t('profile.account_user')}
|
||||
</div>
|
||||
|
||||
<div className='bg-white rounded-3xl p-6 mt-8 text-sm'>
|
||||
<div className='mt-10 flex items-center border-b pb-7'>
|
||||
<div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
|
||||
<div className='xl:mt-10 mt-4 flex xl:flex-row flex-col xl:gap-0 gap-7 xl:items-center border-b pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('profile.image_profile')}
|
||||
@@ -28,11 +28,11 @@ const Profile: FC = () => {
|
||||
{t('profile.image_profile_desc')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 flex gap-6'>
|
||||
<img src={AvatarImage} className='size-20 rounded-full object-cover' />
|
||||
<div className='flex-1 flex xl:gap-6 gap-4'>
|
||||
<img src={AvatarImage} className='xl:size-20 size-14 rounded-full object-cover' />
|
||||
<div>
|
||||
<Button
|
||||
className='w-[160px]'
|
||||
className='xl:w-[160px] w-fit px-4 xl:;px-0 h-8 xl:h-10 text-xs xl:text-sm'
|
||||
>
|
||||
<div className='flex items-center gap-3'>
|
||||
<DocumentUpload color='white' size={18} />
|
||||
@@ -46,7 +46,7 @@ const Profile: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex border-b pb-7'>
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('profile.info_account')}
|
||||
@@ -56,40 +56,40 @@ const Profile: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 '>
|
||||
<div className='flex items-end gap-6'>
|
||||
<div className='flex items-end xl:gap-6 gap-3'>
|
||||
<Input
|
||||
label={t('profile.username')}
|
||||
value={'mehrdad'}
|
||||
readOnly
|
||||
/>
|
||||
<div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
|
||||
<Edit size={18} color='#0047FF' />
|
||||
<Edit className='xl:size-[18px] size-4' color='#0047FF' />
|
||||
<div>
|
||||
{t('edit')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-end gap-6 mt-7'>
|
||||
<div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
|
||||
<Input
|
||||
label={t('email')}
|
||||
value={'info@example.com'}
|
||||
readOnly
|
||||
/>
|
||||
<div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
|
||||
<Edit size={18} color='#0047FF' />
|
||||
<Edit className='xl:size-[18px] size-4' color='#0047FF' />
|
||||
<div>
|
||||
{t('edit')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-end gap-6 mt-7'>
|
||||
<div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
|
||||
<Input
|
||||
label={t('profile.phone_call')}
|
||||
value={'۰۹۱۲۹۲۸۳۳۹۵'}
|
||||
readOnly
|
||||
/>
|
||||
<div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
|
||||
<Edit size={18} color='#0047FF' />
|
||||
<Edit className='xl:size-[18px] size-4' color='#0047FF' />
|
||||
<div>
|
||||
{t('edit')}
|
||||
</div>
|
||||
@@ -98,7 +98,7 @@ const Profile: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex border-b pb-7'>
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('profile.personal_information')}
|
||||
@@ -115,7 +115,7 @@ const Profile: FC = () => {
|
||||
defaulValue='1400-01-01'
|
||||
/>
|
||||
|
||||
<div className='mt-7'>
|
||||
<div className='xl:mt-7 mt-4'>
|
||||
<Input
|
||||
label={t('profile.national_code')}
|
||||
value={'۰۰۱۲۳۴۵۳۴۴'}
|
||||
@@ -124,7 +124,7 @@ const Profile: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex'>
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('profile.address')}
|
||||
@@ -156,13 +156,13 @@ const Profile: FC = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-7'>
|
||||
<div className='xl:mt-7 mt-4'>
|
||||
<Input
|
||||
label={t('profile.postal_code')}
|
||||
value={'۱۲۳۴۵۶۷۸'}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-7'>
|
||||
<div className='xl:mt-7 mt-4'>
|
||||
<Textarea
|
||||
label={t('profile.address')}
|
||||
value={'للورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک استورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است'}
|
||||
@@ -170,6 +170,8 @@ const Profile: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='h-20 xl:hidden'></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -38,17 +38,17 @@ const Setting: FC = () => {
|
||||
|
||||
{
|
||||
activeTab === 'notification' ?
|
||||
<div className='mt-10 bg-white p-8 rounded-3xl'>
|
||||
<div className='mt-10 bg-white xl:p-8 p-4 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>
|
||||
<div className='flex xl:flex-row flex-col gap-6 text-sm mt-8'>
|
||||
<div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
|
||||
<div className='xl:text-sm text-xs'>
|
||||
{t('setting.notification_announcement')}
|
||||
</div>
|
||||
<div className='flex gap-4'>
|
||||
<div className='flex xl:gap-4 gap-2'>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
@@ -69,11 +69,11 @@ const Setting: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
|
||||
<div>
|
||||
<div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
|
||||
<div className='xl:text-sm text-xs'>
|
||||
{t('setting.notification_announcement')}
|
||||
</div>
|
||||
<div className='flex gap-4'>
|
||||
<div className='flex xl:gap-4 gap-2'>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
@@ -95,12 +95,12 @@ const Setting: FC = () => {
|
||||
</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>
|
||||
<div className='flex xl:flex-row flex-col gap-6 text-sm mt-6'>
|
||||
<div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
|
||||
<div className='xl:text-sm text-xs'>
|
||||
{t('setting.notification_announcement')}
|
||||
</div>
|
||||
<div className='flex gap-4'>
|
||||
<div className='flex xl:gap-4 gap-2'>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
@@ -121,11 +121,11 @@ const Setting: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
|
||||
<div>
|
||||
<div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
|
||||
<div className='xl:text-sm text-xs'>
|
||||
{t('setting.notification_announcement')}
|
||||
</div>
|
||||
<div className='flex gap-4'>
|
||||
<div className='flex xl:gap-4 gap-2'>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
@@ -154,7 +154,7 @@ const Setting: FC = () => {
|
||||
{t('setting.change_password')}
|
||||
</div>
|
||||
|
||||
<div className='flex gap-10'>
|
||||
<div className='flex xl:flex-row flex-col xl:gap-10 gap-4'>
|
||||
<div className='flex-1'>
|
||||
<Input
|
||||
type='password'
|
||||
@@ -172,7 +172,7 @@ const Setting: FC = () => {
|
||||
placeholder={t('setting.reapeat_password')}
|
||||
/>
|
||||
|
||||
<div className='mt-9'>
|
||||
<div className='mt-9 xl:block hidden'>
|
||||
<Button
|
||||
label={t('setting.save_change')}
|
||||
className='w-32'
|
||||
@@ -180,7 +180,7 @@ const Setting: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex-1 p-8 bg-[#EEF0F7] rounded-3xl text-sm'>
|
||||
<div className='flex-1 xl:p-8 p-4 bg-[#EEF0F7] rounded-3xl text-sm'>
|
||||
<div>
|
||||
{t('setting.password_is')}
|
||||
</div>
|
||||
@@ -199,7 +199,16 @@ const Setting: FC = () => {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className=' xl:hidden block'>
|
||||
<Button
|
||||
label={t('setting.save_change')}
|
||||
className='w-32'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='h-14'></div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user