feat: add user profile page (#6)

components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, Story } from '@storybook/react'
+
+import {
+  UserProfileGuild as Component,
+  UserProfileGuildProps
+} from './UserProfileGuild'
+
+const Stories: Meta = {
+  title: 'UserProfileGuild',
+  component: Component
+}
+
+export default Stories
+
+export const UserProfileGuild: Story<UserProfileGuildProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+UserProfileGuild.args = { className: 'text-center' }

components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.test.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react'
+
+import { UserProfileGuild } from './UserProfileGuild'
+
+describe('<UserProfileGuild />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <UserProfileGuild handleConfirmationState={() => {}} />
+    )
+    expect(baseElement).toBeTruthy()
+  })
+})

components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.tsx

@@ -0,0 +1,46 @@
+import Image from 'next/image'
+import { LoginIcon } from '@heroicons/react/solid'
+
+export interface UserProfileGuildProps {
+  className?: string
+  handleConfirmationState: () => void
+}
+
+export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => {
+  const { handleConfirmationState } = props
+
+  return (
+    <div
+      className='relative flex w-full cursor-pointer transition group'
+      onClick={handleConfirmationState}
+    >
+      <div className='relative group-hover:-translate-x-20 px-8 py-5 w-full transition'>
+        <div className='flex group-hover:opacity-40 transition'>
+          <div className='flex justify-center rounded-full filter drop-shadow-lg mr-8 min-w-[60px] min-h-[60px] select-none'>
+            <Image
+              className='rounded-full'
+              src='/images/guilds/Guild_1.svg'
+              alt={'Profil Picture'}
+              draggable='false'
+              height={60}
+              width={60}
+            />
+          </div>
+          <div className='flex flex-col'>
+            <h1 className='text-xl font-bold'>Guild Name</h1>
+            <p className='text-gray-300 mt-2'>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
+              nam.
+            </p>
+          </div>
+        </div>
+        <div className='absolute top-0 right-[-80px] flex justify-center items-center w-[80px] h-full'>
+          <LoginIcon
+            height={40}
+            className='fill-green-600 drop-shadow-[0_0_15px_rgba(22,163,74,0.50)]'
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/index.ts

@@ -0,0 +1 @@
+export * from './UserProfileGuild'

components/Application/UserProfile/UserProfileGuilds/UserProfileGuilds.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, Story } from '@storybook/react'
+
+import {
+  UserProfileGuilds as Component,
+  UserProfileGuildsProps
+} from './UserProfileGuilds'
+
+const Stories: Meta = {
+  title: 'UserProfileGuilds',
+  component: Component
+}
+
+export default Stories
+
+export const UserProfileGuilds: Story<UserProfileGuildsProps> = (
+  arguments_
+) => {
+  return <Component {...arguments_} />
+}
+UserProfileGuilds.args = {}

components/Application/UserProfile/UserProfileGuilds/UserProfileGuilds.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { UserProfileGuilds } from './UserProfileGuilds'
+
+describe('<UserProfileGuilds />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<UserProfileGuilds />)
+    expect(baseElement).toBeTruthy()
+  })
+})

components/Application/UserProfile/UserProfileGuilds/UserProfileGuilds.tsx

@@ -0,0 +1,104 @@
+import Image from 'next/image'
+import classNames from 'classnames'
+import { EyeOffIcon } from '@heroicons/react/solid'
+import useTranslation from 'next-translate/useTranslation'
+
+export interface UserProfileGuildsProps {
+  isPublicGuilds?: boolean
+}
+
+export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
+  const { isPublicGuilds = false } = props
+  const { t } = useTranslation()
+
+  return (
+    <div
+      className={classNames('relative cursor-pointer', {
+        'cursor-auto': !isPublicGuilds
+      })}
+    >
+      <div
+        className={classNames('flex -space-x-7', {
+          'blur-lg select-none': !isPublicGuilds
+        })}
+      >
+        <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>
+        <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
+        className={classNames(
+          'absolute flex items-center top-1/2 -translate-y-1/2',
+          { hidden: isPublicGuilds }
+        )}
+      >
+        <EyeOffIcon height={25} />
+        <p className='drop-shadow-2xl ml-4'>
+          {t('application:private-user-guilds-list')}
+        </p>
+      </div>
+    </div>
+  )
+}

components/Application/UserProfile/UserProfileGuilds/index.ts

@@ -0,0 +1 @@
+export * from './UserProfileGuilds'