This repository has been archived on 2024-10-29. You can view files and clone it, but cannot push or open issues or pull requests.
website/components/Application/Channels/Channel.tsx

55 lines
1.7 KiB
TypeScript
Raw Normal View History

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
}
2022-08-30 21:30:06 +02:00
const ChannelMemo: React.FC<ChannelProps> = (props) => {
const { channel, path, selected = false } = props
const router = useRouter()
const { member } = useGuildMember()
return (
2022-12-13 11:38:07 +01:00
<Link
href={`/application/${path.guildId}/${channel.id}`}
className={classNames(
"group relative mx-3 my-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",
2022-12-13 11:38:07 +01:00
{
"font-semibold text-green-800 dark:text-green-400": selected,
},
2022-12-13 11:38:07 +01:00
)}
>
<span className="max-[315px] ml-2 mr-4 break-all" data-cy="channel-name">
2022-12-13 11:38:07 +01:00
# {channel.name}
</span>
{member.isOwner && (
<IconButton
onClick={async () => {
await router.push(
`/application/${channel.guildId}/${channel.id}/settings`,
2022-12-13 11:38:07 +01:00
)
}}
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"
>
2022-12-13 11:38:07 +01:00
<CogIcon height={20} width={20} />
</IconButton>
)}
</Link>
)
}
2022-08-30 21:30:06 +02:00
export const Channel = memo(ChannelMemo)