feat: design applications and first api calls

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

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>
+  )
+}