fix: improve responsive for UserProfile
This commit is contained in:
Divlo
parent
4141f1eeab
commit
0028974c3b
@ -16,84 +16,94 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
|||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='relative flex h-full flex-col items-center justify-center'>
|
<>
|
||||||
<div className='transition'>
|
<div className='relative flex h-full flex-col items-center justify-center'>
|
||||||
<div className='max-w-[1000px] px-12'>
|
<div className='transition'>
|
||||||
<div className='flex items-center justify-between'>
|
<div className='max-w-[1000px] px-12'>
|
||||||
<div className='flex w-max items-center'>
|
<div className='flex items-center justify-between'>
|
||||||
<div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
|
<div className='flex w-max flex-col items-center gap-7 md:flex-row'>
|
||||||
<Image
|
<div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
|
||||||
quality={100}
|
<Image
|
||||||
className='rounded-full'
|
quality={100}
|
||||||
src={
|
className='rounded-full'
|
||||||
user.logo != null
|
src={
|
||||||
? user.logo
|
user.logo != null
|
||||||
: '/images/data/user-default.png'
|
? user.logo
|
||||||
}
|
: '/images/data/user-default.png'
|
||||||
alt='Profil Picture'
|
}
|
||||||
draggable='false'
|
alt='Profil Picture'
|
||||||
height={125}
|
draggable='false'
|
||||||
width={125}
|
height={125}
|
||||||
/>
|
width={125}
|
||||||
</div>
|
/>
|
||||||
<div className='ml-10 flex flex-col'>
|
|
||||||
<div className='mb-2 flex items-center'>
|
|
||||||
<p
|
|
||||||
className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
|
|
||||||
data-cy='user-name'
|
|
||||||
>
|
|
||||||
{user.name}
|
|
||||||
</p>
|
|
||||||
<p
|
|
||||||
className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
|
|
||||||
data-cy='user-createdAt'
|
|
||||||
>
|
|
||||||
{date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div className='my-2 text-left'>
|
<div className='ml-10 flex flex-col'>
|
||||||
{user.email != null && (
|
<div className='mb-2 flex items-center'>
|
||||||
<p className='font-bold'>
|
<p
|
||||||
Email:{' '}
|
className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
|
||||||
<a
|
data-cy='user-name'
|
||||||
href={`mailto:${user.email}`}
|
>
|
||||||
target='_blank'
|
{user.name}
|
||||||
className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-1px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
|
|
||||||
rel='noreferrer'
|
|
||||||
data-cy='user-email'
|
|
||||||
>
|
|
||||||
{user.email}
|
|
||||||
</a>
|
|
||||||
</p>
|
</p>
|
||||||
)}
|
<p
|
||||||
{user.website != null && (
|
className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
|
||||||
<p className='font-bold'>
|
data-cy='user-createdAt'
|
||||||
{t('application:website')}:{' '}
|
>
|
||||||
<a
|
{date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
|
||||||
href={user.website}
|
|
||||||
className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
|
|
||||||
>
|
|
||||||
{user.website}
|
|
||||||
</a>
|
|
||||||
</p>
|
</p>
|
||||||
)}
|
</div>
|
||||||
{user.status != null && (
|
<div className='my-2 text-left'>
|
||||||
<p className='flex font-bold'>
|
{user.email != null && (
|
||||||
{t('application:status')}:{' '}
|
<p className='font-bold'>
|
||||||
<span className='ml-2 font-normal tracking-wide'>
|
Email:{' '}
|
||||||
{user.status}
|
<a
|
||||||
</span>
|
href={`mailto:${user.email}`}
|
||||||
</p>
|
target='_blank'
|
||||||
)}
|
className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-1px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
|
||||||
|
rel='noreferrer'
|
||||||
|
data-cy='user-email'
|
||||||
|
>
|
||||||
|
{user.email}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{user.website != null && (
|
||||||
|
<p className='font-bold'>
|
||||||
|
{t('application:website')}:{' '}
|
||||||
|
<a
|
||||||
|
href={user.website}
|
||||||
|
className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
|
||||||
|
>
|
||||||
|
{user.website}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{user.status != null && (
|
||||||
|
<p className='flex font-bold'>
|
||||||
|
{t('application:status')}:{' '}
|
||||||
|
<span className='ml-2 font-normal tracking-wide'>
|
||||||
|
{user.status}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{user.biography != null && (
|
||||||
<div className='mt-7'>
|
<div className='mt-7 text-center'>
|
||||||
{user.biography != null && <p>{user.biography}</p>}
|
<p>{user.biography}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<style jsx global>{`
|
||||||
|
#application-page-content {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user