feat: create a guild (#1)
This commit is contained in:
Divlo
GitHub
21
components/Application/UserProfile/UserProfile.stories.tsx
Normal file
21
components/Application/UserProfile/UserProfile.stories.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { Meta, Story } from '@storybook/react'
|
||||
import { user, userSettings } from '../../../cypress/fixtures/users/user'
|
||||
|
||||
import { UserProfile as Component, UserProfileProps } from './UserProfile'
|
||||
|
||||
const Stories: Meta = {
|
||||
title: 'UserProfile',
|
||||
component: Component
|
||||
}
|
||||
|
||||
export default Stories
|
||||
|
||||
export const UserProfile: Story<UserProfileProps> = (arguments_) => {
|
||||
return <Component {...arguments_} />
|
||||
}
|
||||
UserProfile.args = {
|
||||
user: {
|
||||
...user,
|
||||
settings: userSettings
|
||||
}
|
||||
}
|
||||
14
components/Application/UserProfile/UserProfile.test.tsx
Normal file
14
components/Application/UserProfile/UserProfile.test.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { render } from '@testing-library/react'
|
||||
|
||||
import { user, userSettings } from '../../../cypress/fixtures/users/user'
|
||||
|
||||
import { UserProfile } from './UserProfile'
|
||||
|
||||
describe('<UserProfile />', () => {
|
||||
it('should render successfully', () => {
|
||||
const { baseElement } = render(
|
||||
<UserProfile user={{ ...user, settings: userSettings }} />
|
||||
)
|
||||
expect(baseElement).toBeTruthy()
|
||||
})
|
||||
})
|
||||
189
components/Application/UserProfile/UserProfile.tsx
Normal file
189
components/Application/UserProfile/UserProfile.tsx
Normal file
@ -0,0 +1,189 @@
|
||||
import Image from 'next/image'
|
||||
import { PencilIcon, PhotographIcon } from '@heroicons/react/solid'
|
||||
import classNames from 'classnames'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import date from 'date-and-time'
|
||||
|
||||
import { UserPublic } from '../../../models/User'
|
||||
|
||||
export interface UserProfileProps {
|
||||
className?: string
|
||||
isOwner?: boolean
|
||||
user: UserPublic
|
||||
}
|
||||
|
||||
export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
const { user, isOwner = false } = props
|
||||
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleSubmitChanges = (
|
||||
event: React.FormEvent<HTMLFormElement>
|
||||
): void => {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='h-full flex flex-col items-center justify-center'>
|
||||
<div className='min-w-[1080px]'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className='w-max flex items-center'>
|
||||
<div
|
||||
className={classNames(
|
||||
'relative flex justify-center items-center rounded-full overflow-hidden transition-all shadow-lg',
|
||||
{
|
||||
'after:absolute after:w-full after:h-full border-4 border-white cursor-pointer':
|
||||
isOwner
|
||||
}
|
||||
)}
|
||||
>
|
||||
{isOwner && (
|
||||
<div className='absolute w-full h-full z-50'>
|
||||
<button className='relative w-full h-full flex items-center justify-center transition hover:-translate-y-1'>
|
||||
<input
|
||||
type='file'
|
||||
className='absolute w-full h-full opacity-0 cursor-pointer'
|
||||
/>
|
||||
<PhotographIcon className='w-14 h-14' />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<Image
|
||||
className={classNames('rounded-full', {
|
||||
'opacity-30': isOwner
|
||||
})}
|
||||
src='/images/data/divlo.png'
|
||||
alt={'Profil Picture'}
|
||||
draggable='false'
|
||||
height={125}
|
||||
width={125}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col ml-10'>
|
||||
<div className='flex items-center mb-2 border'>
|
||||
<form onSubmit={handleSubmitChanges}>
|
||||
<input
|
||||
type='text'
|
||||
value={user.name}
|
||||
className='min-w-[10px] border bg-transparent text-3xl font-bold space tracking-wide text-white'
|
||||
disabled
|
||||
/>
|
||||
</form>
|
||||
{isOwner && (
|
||||
<button className='ml-2 text-gray-500'>
|
||||
<PencilIcon className='w-6 h-6' />
|
||||
</button>
|
||||
)}
|
||||
<span className='h-5 w-5 bg-error shadow-error ml-4 rounded-full'>
|
||||
{''}
|
||||
</span>
|
||||
<p className='ml-8 text-sm tracking-widest text-white opacity-40 select-none'>
|
||||
{date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
|
||||
</p>
|
||||
</div>
|
||||
<div className='text-left my-2'>
|
||||
{user.website != null && (
|
||||
<p className='font-bold'>
|
||||
{t('application:website')}:{' '}
|
||||
<a
|
||||
href={user.website}
|
||||
className='relative ml-2 opacity-80 hover:opacity-100 transition-all no-underline font-normal tracking-wide after:absolute after:left-0 after:bottom-[-1px] after:bg-black dark:after:bg-white after:h-[1px] after:w-0 after:transition-all hover:after:w-full'
|
||||
>
|
||||
{user.website}
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
{user.email != null && (
|
||||
<p className='font-bold'>
|
||||
Email:{' '}
|
||||
<a
|
||||
href={`mailto:${user.email}`}
|
||||
target='_blank'
|
||||
className='relative ml-2 opacity-80 hover:opacity-100 transition-all no-underline font-normal tracking-wide after:absolute after:left-0 after:bottom-[-1px] after:bg-black dark:after:bg-white after:h-[1px] after:w-0 after:transition-all hover:after:w-full'
|
||||
rel='noreferrer'
|
||||
>
|
||||
{user.email}
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex -space-x-7'>
|
||||
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_1.svg'
|
||||
alt={'Profil Picture'}
|
||||
draggable='false'
|
||||
height={60}
|
||||
width={60}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_2.svg'
|
||||
alt={'Profil Picture'}
|
||||
draggable='false'
|
||||
height={60}
|
||||
width={60}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_3.svg'
|
||||
alt={'Profil Picture'}
|
||||
draggable='false'
|
||||
height={60}
|
||||
width={60}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_4.svg'
|
||||
alt={'Profil Picture'}
|
||||
draggable='false'
|
||||
height={60}
|
||||
width={60}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_5.svg'
|
||||
alt={'Profil Picture'}
|
||||
draggable='false'
|
||||
height={60}
|
||||
width={60}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_6.svg'
|
||||
alt={'Profil Picture'}
|
||||
draggable='false'
|
||||
height={60}
|
||||
width={60}
|
||||
/>
|
||||
</div>
|
||||
{/* End of the guilds list */}
|
||||
<div className='w-[60px] h-[60px] flex justify-center items-center rounded-full filter drop-shadow-lg bg-gray-300 dark:bg-gray-800 z-10'>
|
||||
<span className='font-bold text-black dark:text-white text-xl select-none'>
|
||||
+4
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-7'>
|
||||
{user.biography != null && (
|
||||
<p className='w-[45%]'>{user.biography}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
1
components/Application/UserProfile/index.ts
Normal file
1
components/Application/UserProfile/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './UserProfile'
|
||||
Reference in New Issue
Block a user