danak/danak-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reponsive profile and responsive setting

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