pleroma/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx

import React, { HTMLAttributes } from 'react';

import { HStack, IconButton, Text } from 'soapbox/components/ui';

interface IChatPaneHeader {
  isOpen: boolean
  isToggleable?: boolean
  onToggle(): void
  title: string | React.ReactNode
  unreadCount?: number
  secondaryAction?(): void
  secondaryActionIcon?: string
}

const ChatPaneHeader = (props: IChatPaneHeader) => {
  const {
    isOpen,
    isToggleable = true,
    onToggle,
    secondaryAction,
    secondaryActionIcon,
    title,
    unreadCount,
    ...rest
  } = props;

  const ButtonComp = isToggleable ? 'button' : 'div';
  const buttonProps: HTMLAttributes<HTMLButtonElement | HTMLDivElement> = {};
  if (isToggleable) {
    buttonProps.onClick = onToggle;
  }

  return (
    <HStack {...rest} alignItems='center' justifyContent='between' className='h-16 rounded-t-xl px-4 py-3'>
      <ButtonComp
        className='flex h-16 grow flex-row items-center space-x-1'
        data-testid='title'
        {...buttonProps}
      >
        <Text weight='semibold' tag='div'>
          {title}
        </Text>

        {(typeof unreadCount !== 'undefined' && unreadCount > 0) && (
          <HStack alignItems='center' space={2}>
            <Text weight='semibold' data-testid='unread-count'>
              ({unreadCount})
            </Text>

            <div className='h-2.5 w-2.5 rounded-full bg-accent-300' />
          </HStack>
        )}
      </ButtonComp>

      <HStack space={2} alignItems='center'>
        {secondaryAction ? (
          <IconButton
            onClick={secondaryAction}
            src={secondaryActionIcon as string}
            iconClassName='h-5 w-5 text-gray-600'
          />
        ) : null}

        <IconButton
          onClick={onToggle}
          src={isOpen ? require('@tabler/icons/chevron-down.svg') : require('@tabler/icons/chevron-up.svg')}
          iconClassName='h-5 w-5 text-gray-600'
        />
      </HStack>
    </HStack>
  );
};

export default ChatPaneHeader;