Skip to content

Commit

Permalink
update profile
Browse files Browse the repository at this point in the history
  • Loading branch information
@imhson
imhson committed Aug 23, 2023
1 parent c081719 commit ca10eb3
Showing 1 changed file with 146 additions and 142 deletions.
288 changes: 146 additions & 142 deletions src/pages/profile/profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export default function Profile({ subscribeList, unsubscribe, subscribe, curentl
<div className='pk-container py-5 px-5 md:px-0 md:py-10'>
{isSettingUp ? (
<div className='flex gap-[60px]'>
<div className='w-[320px] h-[320px] rounded-xl object-cover bg-light-gray animate-pulse'></div>
<div className='w-[280px] h-[280px] rounded-xl object-cover bg-light-gray animate-pulse'></div>
<div className='flex flex-col justify-between'>
<div>
<p className='h-10 animate-pulse bg-light-gray text-second-color mb-1 md:mb-4 w-2/3'></p>
Expand All @@ -163,10 +163,10 @@ export default function Profile({ subscribeList, unsubscribe, subscribe, curentl
<>
<div className={`flex gap-[10px] md:gap-[60px] flex-wrap`}>
<div
className={`flex transition-all justify-center md:max-w-[320px] p-[5px] md:p-0 ${
className={`flex transition-all justify-center md:max-w-[280px] p-[5px] md:p-0 ${
open ? 'w-full md:w-2/5' : 'w-[120px] h-[120px] md:w-2/5 md:h-auto'
}`}>
<div className='max-w-[120px] md:max-w-[320px] relative flex-1 '>
<div className='max-w-[120px] md:max-w-[280px] relative flex-1 '>
<div className='border-[4px] md:border-none border-second-color aspect-square rounded-full md:rounded-xl object-contain bg-light-gray overflow-hidden'>
<div
className={`aspect-square rounded-full md:rounded-xl w-full transition-all bg-medium-gray duration-300 absolute top-0 right-[1.5px] opacity-0 flex flex-col justify-center items-center cursor-pointer ${
Expand Down Expand Up @@ -204,157 +204,161 @@ export default function Profile({ subscribeList, unsubscribe, subscribe, curentl
</div>
<div
className={`flex-[1_0_180px] flex flex-col relative ${
open ? 'gap-[10px]' : 'gap-[5px] md:gap-[10px]'
open ? 'gap-[10px]' : 'gap-[5px] md:gap-[10px] md:justify-between'
}`}>
<div className='flex'>
<div
className={`inline-block text-medium-gray transition-all md:font-bold text-sm md:text-base leading-[18px] md:leading-10 ${
open ? 'w-[88px] md:w-[130px] opacity-100 md:leading-6' : 'w-0 h-0 opacity-0'
}`}>
{t('Username')}:
</div>
<div
className={`text-black md:text-second-color transition-all leading-[18px] md:leading-10 ${
open
? 'text-sm md:text-base font-extrabold mb-0 md:leading-6'
: 'text-sm md:text-[32px] font-semibold md:font-extrabold'
}`}>
{account.name}
</div>
</div>
<div className={`flex`}>
<div
className={`inline-block text-medium-gray transition-all md:font-bold text-sm md:text-base leading-[18px] md:leading-10 ${
open ? 'w-[88px] md:w-[130px] opacity-100 md:leading-6' : 'w-0 h-0 opacity-0'
}`}>
{t('Email')}:
</div>
<div
className={`transition-all text-sm md:text-base leading-[18px] md:leading-5 flex gap-1 items-center ${
open
? 'mb-0 text-[#0F4072] md:text-[#61646B] md:leading-6 md:font-bold'
: 'text-[#0F4072] md:text-second-color'
}`}>
<span className={open ? 'hidden' : ''}>
<Image src={LinkSvg} alt='' className='md:w-4 md:h-4' />
</span>
{account.email}
</div>
</div>
{account.birthdate && (
<div className={`flex items-center`}>
<div className={`flex flex-col ${open ? 'gap-[10px]' : 'gap-[5px]'}`}>
<div className='flex'>
<div
className={`inline-block text-medium-gray transition-all md:text-base md:leading-5 ${
open
? 'text-sm leading-[18px] w-[88px] md:font-bold md:w-[130px]'
: 'text-xs leading-[15px] w-[63px] md:w-[84px] md:font-medium'
className={`inline-block text-medium-gray transition-all md:font-bold text-sm md:text-base leading-[18px] md:leading-10 ${
open ? 'w-[88px] md:w-[130px] opacity-100 md:leading-6' : 'w-0 h-0 opacity-0'
}`}>
{t('DOB')}:
{t('Username')}:
</div>
{open ? (
<div>
<DatePicker
selected={birthdate}
showMonthDropdown
showYearDropdown
locale={locale == 'vn' ? vi : ''}
dropdownMode='select'
onChange={(date) => setBirthdate(date)}
customInput={<CustomInput />}
maxDate={new Date()}
/>
</div>
) : (
<div className='text-xs text-[#19191B] font-medium leading-[15px] md:text-base md:leading-5'>
{moment(account.birthdate).format('DD/MM/yyyy')}
</div>
)}
</div>
)}
{account.gender && (
<div className={`flex items-center`}>
<div
className={`inline-block text-medium-gray transition-all md:text-base md:leading-5 ${
className={`text-black md:text-second-color transition-all leading-[18px] md:leading-10 ${
open
? 'text-sm leading-[18px] w-[88px] md:font-bold md:w-[130px]'
: 'text-xs leading-[15px] w-[63px] md:w-[84px] md:font-medium'
? 'text-sm md:text-base font-extrabold mb-0 md:leading-6'
: 'text-sm md:text-[32px] font-semibold md:font-extrabold'
}`}>
{t('Gender')}:
{account.name}
</div>
{open ? (
<div>
<Select
className='text-[#61646B]'
selected={gender}
onChange={setGender}
placeholder={t('Select a gender')}
icon={<ChevronDownIcon className='h-5 w-5 text-medium-gray' aria-hidden='true' />}
options={[
{
key: 'Male',
value: t('Male'),
},
{
key: 'Female',
value: t('Female'),
},
{
key: 'Other',
value: t('Other'),
},
]}
/>
</div>
) : (
<div className='text-xs text-[#19191B] font-medium leading-[15px] md:text-base md:leading-5 capitalize flex items-center'>
{t(account.gender == 'Undisclosed' ? 'Other' : account.gender)}{' '}
<Image
className='h-[14px] w-[14px] md:h-[20px] md:w-[20px]'
src={
account.gender.toLowerCase() == 'male'
? MaleIcon
: account.gender.toLowerCase() == 'female'
? FemaleIcon
: OtherIcon
}
alt=''
/>
</div>
)}
</div>
)}
{account.bio && (
<div className={`flex items-center`}>
<div className={`flex`}>
<div
className={`inline-block text-medium-gray transition-all md:text-base md:leading-5 ${
className={`inline-block text-medium-gray transition-all md:font-bold text-sm md:text-base leading-[18px] md:leading-10 ${
open ? 'w-[88px] md:w-[130px] opacity-100 md:leading-6' : 'w-0 h-0 opacity-0'
}`}>
{t('Email')}:
</div>
<div
className={`transition-all text-sm md:text-base leading-[18px] md:leading-5 flex gap-1 items-center ${
open
? 'text-sm leading-[18px] w-[88px] md:font-bold md:w-[130px]'
: 'text-xs leading-[15px] w-[63px] md:w-[84px] md:font-medium'
? 'mb-0 text-[#0F4072] md:text-[#61646B] md:leading-6 md:font-bold'
: 'text-[#0F4072] md:text-second-color'
}`}>
{t('Bio')}:
<span className={open ? 'hidden' : ''}>
<Image src={LinkSvg} alt='' className='md:w-4 md:h-4' />
</span>
{account.email}
</div>
{open ? (
<AutoGrowingTextField
value={bio}
onChange={setBio}
placeholder={t('Write something about yourself')}
className='text-sm text-[#61646B] font-normal md:font-bold leading-6 min-h-[52px] flex-1 max-w-[calc(100vw-128px)] max-h-[150px] md:min-h-[72px] rounded-lg'
/>
) : (
<div className='text-xs text-[#19191B] font-medium leading-[15px] md:font-medium md:text-base md:leading-5'>
<p
className={`text-[#19191B] ${showMore ? '' : 'line-clamp-3 cursor-pointer'}`}
onClick={() => setShowMore(!showMore)}>
{account.bio}
</p>
</div>
)}
</div>
)}
<div className='relative md:absolute md:bottom-0 md:w-full'>
</div>
<div className={`flex flex-col ${open ? 'gap-[10px]' : 'gap-[5px] md:gap-[10px]'}`}>
{account.birthdate && (
<div className={`flex items-center`}>
<div
className={`inline-block text-medium-gray transition-all md:text-base md:leading-5 ${
open
? 'text-sm leading-[18px] w-[88px] md:font-bold md:w-[130px]'
: 'text-xs leading-[15px] w-[63px] md:w-[84px] md:font-medium'
}`}>
{t('DOB')}:
</div>
{open ? (
<div>
<DatePicker
selected={birthdate}
showMonthDropdown
showYearDropdown
locale={locale == 'vn' ? vi : ''}
dropdownMode='select'
onChange={(date) => setBirthdate(date)}
customInput={<CustomInput />}
maxDate={new Date()}
/>
</div>
) : (
<div className='text-xs text-[#19191B] font-medium leading-[15px] md:text-base md:leading-5'>
{moment(account.birthdate).format('DD/MM/yyyy')}
</div>
)}
</div>
)}
{account.gender && (
<div className={`flex items-center`}>
<div
className={`inline-block text-medium-gray transition-all md:text-base md:leading-5 ${
open
? 'text-sm leading-[18px] w-[88px] md:font-bold md:w-[130px]'
: 'text-xs leading-[15px] w-[63px] md:w-[84px] md:font-medium'
}`}>
{t('Gender')}:
</div>
{open ? (
<div>
<Select
className='text-[#61646B]'
selected={gender}
onChange={setGender}
placeholder={t('Select a gender')}
icon={<ChevronDownIcon className='h-5 w-5 text-medium-gray' aria-hidden='true' />}
options={[
{
key: 'Male',
value: t('Male'),
},
{
key: 'Female',
value: t('Female'),
},
{
key: 'Other',
value: t('Other'),
},
]}
/>
</div>
) : (
<div className='text-xs text-[#19191B] font-medium leading-[15px] md:text-base md:leading-5 capitalize flex items-center'>
{t(account.gender == 'Undisclosed' ? 'Other' : account.gender)}{' '}
<Image
className='h-[14px] w-[14px] md:h-[20px] md:w-[20px]'
src={
account.gender.toLowerCase() == 'male'
? MaleIcon
: account.gender.toLowerCase() == 'female'
? FemaleIcon
: OtherIcon
}
alt=''
/>
</div>
)}
</div>
)}
{account.bio && (
<div className={`flex items-center`}>
<div
className={`inline-block text-medium-gray transition-all md:text-base md:leading-5 ${
open
? 'text-sm leading-[18px] w-[88px] md:font-bold md:w-[130px]'
: 'text-xs leading-[15px] w-[63px] md:w-[84px] md:font-medium'
}`}>
{t('Bio')}:
</div>
{open ? (
<AutoGrowingTextField
value={bio}
onChange={setBio}
placeholder={t('Write something about yourself')}
className='text-sm text-[#61646B] font-normal md:font-bold leading-6 min-h-[52px] flex-1 max-w-[calc(100vw-128px)] max-h-[150px] md:min-h-[72px] rounded-lg'
/>
) : (
<div className='text-xs text-[#19191B] font-medium leading-[15px] md:font-medium md:text-base md:leading-5'>
<p
className={`text-[#19191B] ${showMore ? '' : 'line-clamp-3 cursor-pointer'}`}
onClick={() => setShowMore(!showMore)}>
{account.bio}
</p>
</div>
)}
</div>
)}
</div>
<div className='relative'>
<div
className={`flex gap-2 mt-[15px] md:gap-6 absolute top-0 md:top-[unset] md:bottom-0 transition-all ${
open ? 'left-1/2 -translate-x-1/2 opacity-0 pointer-events-none' : 'left-[0%] opacity-100 '
className={`flex gap-2 mt-[15px] md:mt-0 md:gap-6 transition-all left-0 ${
open ? ' opacity-0 pointer-events-none' : 'opacity-100 '
}`}>
<>
<OutlineButton className='md:hidden' size='xs' onClick={() => setOpen(!open)}>
Expand Down Expand Up @@ -397,10 +401,10 @@ export default function Profile({ subscribeList, unsubscribe, subscribe, curentl
)}
</div>
<div
className={`gap-6 absolute top-0 md:top-[unset] md:bottom-0 transition-all ${
className={`gap-6 transition-all absolute top-0 ${
open
? 'right-1/2 translate-x-1/2 opacity-100 md:right-0 md:translate-x-0'
: 'right-1/2 opacity-0 translate-x-1/2 pointer-events-none'
? 'opacity-100 left-1/2 -translate-x-1/2 md:left-0 md:translate-x-0'
: 'opacity-0 pointer-events-none'
}`}>
<OutlineButton
loading={loading}
Expand Down

0 comments on commit ca10eb3

Please sign in to comment.