website/components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx

import Link from 'next/link'
import { CogIcon, PlusIcon } from '@heroicons/react/solid'

import { useGuildMember } from '../../../contexts/GuildMember'
import { Divider } from '../../design/Divider'
import { Channels } from '../Channels'
import { IconButton } from '../../design/IconButton'
import type { GuildsChannelsPath } from '..'

export interface GuildLeftSidebarProps {
  path: GuildsChannelsPath
}

export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
  const { path } = props

  const { guild, member } = useGuildMember()

  return (
    <div className='mt-2 flex w-full flex-col justify-between'>
      <div className='mx-8 mt-2 p-2 text-center'>
        <h2 data-cy='guild-left-sidebar-title' className='text-xl'>
          {guild.name}
        </h2>
      </div>
      <Divider />
      <Channels path={path} />
      <Divider />
      <div className='mb-1 flex items-center justify-center space-x-6 p-2'>
        {member.isOwner && (
          <Link
            href={`/application/${path.guildId}/channels/create`}
            passHref
            data-cy='link-add-channel'
          >
            <IconButton className='h-10 w-10' title='Add a Channel'>
              <PlusIcon />
            </IconButton>
          </Link>
        )}
        <Link
          href={`/application/${path.guildId}/settings`}
          passHref
          data-cy='link-settings-guild'
        >
          <IconButton className='h-7 w-7' title='Settings'>
            <CogIcon />
          </IconButton>
        </Link>
      </div>
    </div>
  )
}