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'