danak/danak-admin
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')}
</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>