feat(pages): add /application/[guildId]/[channelId]
(#4)
This commit is contained in:
16
components/Application/Channels/Channel/Channel.stories.tsx
Normal file
16
components/Application/Channels/Channel/Channel.stories.tsx
Normal file
@ -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 }
|
13
components/Application/Channels/Channel/Channel.test.tsx
Normal file
13
components/Application/Channels/Channel/Channel.test.tsx
Normal file
@ -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()
|
||||
})
|
||||
})
|
32
components/Application/Channels/Channel/Channel.tsx
Normal file
32
components/Application/Channels/Channel/Channel.tsx
Normal file
@ -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
|
||||
selected?: boolean
|
||||
}
|
||||
|
||||
export const Channel: React.FC<ChannelProps> = (props) => {
|
||||
const { channel, path, selected = false } = props
|
||||
|
||||
return (
|
||||
<Link 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': selected
|
||||
}
|
||||
)}
|
||||
>
|
||||
<span className='ml-2 mr-4' data-cy='channel-name'>
|
||||
# {channel.name}
|
||||
</span>
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
}
|
1
components/Application/Channels/Channel/index.ts
Normal file
1
components/Application/Channels/Channel/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './Channel'
|
Reference in New Issue
Block a user