kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
75 wiersze
1.9 KiB
TypeScript
75 wiersze
1.9 KiB
TypeScript
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 py-3 px-4'>
|
|
<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='w-5 h-5 text-gray-600'
|
|
/>
|
|
) : null}
|
|
|
|
<IconButton
|
|
onClick={onToggle}
|
|
src={isOpen ? require('@tabler/icons/chevron-down.svg') : require('@tabler/icons/chevron-up.svg')}
|
|
iconClassName='w-5 h-5 text-gray-600'
|
|
/>
|
|
</HStack>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default ChatPaneHeader;
|