feat: design applications and first api calls

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

components/Application/Channels/Channels.stories.tsx

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

components/Application/Channels/Channels.test.tsx

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

components/Application/Channels/Channels.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link'
+import classNames from 'classnames'
+
+import { GuildsChannelsPath } from '../Application'
+
+export interface ChannelsProps {
+  path: GuildsChannelsPath
+}
+
+export const Channels: React.FC<ChannelsProps> = (props) => {
+  const { path } = props
+
+  return (
+    <nav className='w-full'>
+      {new Array(100).fill(null).map((_, index) => {
+        return (
+          <Link key={index} href={`/application/${path.guildId}/${index}`}>
+            <a
+              className={classNames(
+                'hover:bg-gray-100 group flex items-center justify-between text-sm py-2 my-3 mx-3 transition-colors dark:hover:bg-gray-600 duration-200 rounded-lg',
+                {
+                  'text-green-800 dark:text-green-400 font-semibold':
+                    typeof path !== 'string' && path.channelId === index,
+                  'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-normal':
+                    typeof path === 'string'
+                }
+              )}
+            >
+              <span className='ml-2 mr-4'># Channel {index}</span>
+            </a>
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}

components/Application/Channels/index.ts

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