feat: design applications and first api calls

Co-authored-by: Walid <87608619+WalidKorchi@users.noreply.github.com>

components/Application/PopupGuild/PopupGuild.stories.tsx

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

components/Application/PopupGuild/PopupGuild.test.tsx

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

components/Application/PopupGuild/PopupGuild.tsx

@@ -0,0 +1,56 @@
+import { PlusSmIcon, ArrowDownIcon } from '@heroicons/react/solid'
+import classNames from 'classnames'
+import Image from 'next/image'
+
+import { PopupGuildCard } from './PopupGuildCard/PopupGuildCard'
+export interface PopupGuildProps {
+  className?: string
+}
+
+export const PopupGuild: React.FC<PopupGuildProps> = (props) => {
+  const { className } = props
+
+  return (
+    <div
+      className={classNames(
+        className,
+        'flex p-8 flex-wrap justify-center items-center overflow-y-auto h-full-without-header min-w-full'
+      )}
+    >
+      <PopupGuildCard
+        image={
+          <Image
+            src='/images/svg/design/create-guild.svg'
+            alt='Create a guild'
+            draggable='false'
+            width={230}
+            height={230}
+          />
+        }
+        description='Create your own guild and manage everything within a few clicks !'
+        link={{
+          icon: <PlusSmIcon className='w-8 h-8 mr-2' />,
+          text: 'Create a Guild',
+          href: '/application/guilds/create'
+        }}
+      />
+      <PopupGuildCard
+        image={
+          <Image
+            src='/images/svg/design/join-guild.svg'
+            alt='Join a Guild'
+            draggable='false'
+            width={200}
+            height={200}
+          />
+        }
+        description='Talk, meet and have fun with new friends by joining any interesting guild !'
+        link={{
+          icon: <ArrowDownIcon className='w-6 h-6 mr-2' />,
+          text: 'Join a Guild',
+          href: '/application/guilds/join'
+        }}
+      />
+    </div>
+  )
+}

components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, Story } from '@storybook/react'
+import { PlusSmIcon } from '@heroicons/react/solid'
+import Image from 'next/image'
+
+import {
+  PopupGuildCard as Component,
+  PopupGuildCardProps
+} from './PopupGuildCard'
+
+const Stories: Meta = {
+  title: 'PopupGuildCard',
+  component: Component
+}
+
+export default Stories
+
+export const PopupGuildCard: Story<PopupGuildCardProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+PopupGuildCard.args = {
+  image: (
+    <Image
+      src='/images/svg/design/create-server.svg'
+      alt=''
+      width={230}
+      height={230}
+    />
+  ),
+  description:
+    'Create your own guild and manage everything within a few clicks !',
+  link: {
+    icon: <PlusSmIcon className='w-8 h-8 mr-2' />,
+    text: 'Create a server',
+    href: '/application/guilds/create'
+  }
+}

components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.test.tsx

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react'
+import { PlusSmIcon } from '@heroicons/react/solid'
+import Image from 'next/image'
+
+import { PopupGuildCard } from './PopupGuildCard'
+
+describe('<PopupGuildCard />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <PopupGuildCard
+        image={
+          <Image
+            src='/images/svg/design/create-server.svg'
+            alt=''
+            width={230}
+            height={230}
+          />
+        }
+        description='Create your own guild and manage everything within a few clicks !'
+        link={{
+          icon: <PlusSmIcon className='w-8 h-8 mr-2' />,
+          text: 'Create a server',
+          href: '/application/guilds/create'
+        }}
+      />
+    )
+    expect(baseElement).toBeTruthy()
+  })
+})

components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+
+export interface PopupGuildCardProps {
+  image: JSX.Element
+  description: string
+  link: {
+    href: string
+    text: string
+    icon: JSX.Element
+  }
+}
+
+export const PopupGuildCard: React.FC<PopupGuildCardProps> = (props) => {
+  const { image, description, link } = props
+
+  return (
+    <div className='w-80 h-96 m-8 rounded-2xl bg-gray-800'>
+      <div className='flex justify-center items-center h-1/2 w-full'>
+        {image}
+      </div>
+      <div className='flex justify-between flex-col h-1/2 w-full bg-gray-700 rounded-b-2xl mt-2 shadow-sm'>
+        <p className='text-gray-200 mt-6 text-center px-8'>{description}</p>
+        <Link href={link.href}>
+          <a className='flex justify-center items-center w-4/5 h-10 rounded-2xl transition duration-200 ease-in-out text-white font-bold tracking-wide bg-green-400 self-center mb-6 hover:bg-green-600'>
+            {link.icon}
+            {link.text}
+          </a>
+        </Link>
+      </div>
+    </div>
+  )
+}

components/Application/PopupGuild/PopupGuildCard/index.ts

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

components/Application/PopupGuild/index.ts

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