feat: design applications and first api calls

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

components/Application/Guilds/Guilds.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Guilds as Component, GuildsProps } from './'
+
+const Stories: Meta = {
+  title: 'Guilds',
+  component: Component
+}
+
+export default Stories
+
+export const Guilds: Story<GuildsProps> = (arguments_) => (
+  <Component {...arguments_} />
+)
+Guilds.args = { path: { channelId: 1, guildId: 2 } }

components/Application/Guilds/Guilds.test.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react'
+
+import { Guilds } from './'
+
+describe('<Guilds />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <Guilds path={{ channelId: 1, guildId: 2 }} />
+    )
+    expect(baseElement).toBeTruthy()
+  })
+})

components/Application/Guilds/Guilds.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image'
+
+import { ApplicationProps } from '../Application'
+import { IconLink } from '../../design/IconLink'
+
+export interface GuildsProps extends ApplicationProps {}
+
+export const Guilds: React.FC<GuildsProps> = (props) => {
+  const { path } = props
+
+  return (
+    <div className='min-w-[92px] mt-[130px] pt-2 h-full border-r-2 border-gray-500 dark:border-white/20 space-y-2 scrollbar-firefox-support overflow-y-auto'>
+      {new Array(100).fill(null).map((_, index) => {
+        return (
+          <IconLink
+            key={index}
+            href={`/application/${index}/0`}
+            selected={typeof path !== 'string' && path.guildId === index}
+            title='Guild Name'
+          >
+            <div className='pl-[6px]'>
+              <Image
+                src='/images/icons/Thream.png'
+                alt='logo'
+                width={48}
+                height={48}
+              />
+            </div>
+          </IconLink>
+        )
+      })}
+    </div>
+  )
+}

components/Application/Guilds/index.ts

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