feat(contexts): add Channels and Guilds

components/Application/Channels/Channel/Channel.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, Story } from '@storybook/react'
+import { channelExample } from 'cypress/fixtures/channels/channel'
+
+import { Channel as Component, ChannelProps } from './Channel'
+
+const Stories: Meta = {
+  title: 'Channel',
+  component: Component
+}
+
+export default Stories
+
+export const Channel: Story<ChannelProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+Channel.args = { path: { channelId: 1, guildId: 1 }, channel: channelExample }

components/Application/Channels/Channel/Channel.test.tsx

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react'
+import { channelExample } from 'cypress/fixtures/channels/channel'
+
+import { Channel } from './Channel'
+
+describe('<Channel />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <Channel channel={channelExample} path={{ channelId: 1, guildId: 1 }} />
+    )
+    expect(baseElement).toBeTruthy()
+  })
+})

components/Application/Channels/Channel/Channel.tsx

@@ -0,0 +1,32 @@
+import classNames from 'classnames'
+import Link from 'next/link'
+
+import { GuildsChannelsPath } from '../../Application'
+import { Channel as ChannelType } from '../../../../models/Channel'
+
+export interface ChannelProps {
+  path: GuildsChannelsPath
+  channel: ChannelType
+}
+
+export const Channel: React.FC<ChannelProps> = (props) => {
+  const { channel, path } = props
+
+  return (
+    <Link key={channel.id} href={`/application/${path.guildId}/${channel.id}`}>
+      <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 === channel.id,
+            '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.name}</span>
+      </a>
+    </Link>
+  )
+}

components/Application/Channels/Channel/index.ts

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