mirror of
https://github.com/Thream/website.git
synced 2024-07-21 09:28:32 +02:00
59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import { memo } from 'react'
|
|
import classNames from 'clsx'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import { CogIcon } from '@heroicons/react/solid'
|
|
|
|
import type { GuildsChannelsPath } from '../Application'
|
|
import type { Channel as ChannelType } from '../../../models/Channel'
|
|
import { useGuildMember } from '../../../contexts/GuildMember'
|
|
import { IconButton } from '../../design/IconButton'
|
|
|
|
export interface ChannelProps {
|
|
path: GuildsChannelsPath
|
|
channel: ChannelType
|
|
selected?: boolean
|
|
}
|
|
|
|
const ChannelMemo: React.FC<ChannelProps> = (props) => {
|
|
const { channel, path, selected = false } = props
|
|
const router = useRouter()
|
|
|
|
const { member } = useGuildMember()
|
|
|
|
return (
|
|
<Link href={`/application/${path.guildId}/${channel.id}`}>
|
|
<a
|
|
className={classNames(
|
|
'group relative my-3 mx-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
|
|
{
|
|
'font-semibold text-green-800 dark:text-green-400': selected
|
|
}
|
|
)}
|
|
>
|
|
<span
|
|
className='max-[315px] ml-2 mr-4 break-all'
|
|
data-cy='channel-name'
|
|
>
|
|
# {channel.name}
|
|
</span>
|
|
{member.isOwner && (
|
|
<IconButton
|
|
onClick={async () => {
|
|
await router.push(
|
|
`/application/${channel.guildId}/${channel.id}/settings`
|
|
)
|
|
}}
|
|
className='bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600'
|
|
title='Settings'
|
|
>
|
|
<CogIcon height={20} width={20} />
|
|
</IconButton>
|
|
)}
|
|
</a>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export const Channel = memo(ChannelMemo)
|