You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.1 KiB
36 lines
1.1 KiB
import { Layout, Tag, Tooltip } from 'antd'; |
|
import { FC } from 'react'; |
|
import cn from 'classnames'; |
|
import { UserDropdown } from '../../common/UserDropdown/UserDropdown'; |
|
import { OwncastLogo } from '../../common/OwncastLogo/OwncastLogo'; |
|
import styles from './Header.module.scss'; |
|
|
|
const { Header: AntHeader } = Layout; |
|
|
|
export type HeaderComponentProps = { |
|
name: string; |
|
chatAvailable: boolean; |
|
chatDisabled: boolean; |
|
}; |
|
|
|
export const Header: FC<HeaderComponentProps> = ({ |
|
name = 'Your stream title', |
|
chatAvailable, |
|
chatDisabled, |
|
}) => ( |
|
<AntHeader className={cn([`${styles.header}`], 'global-header')}> |
|
<div className={`${styles.logo}`}> |
|
<div id="header-logo"> |
|
<OwncastLogo variant="contrast" /> |
|
</div> |
|
<span id="global-header-text">{name}</span> |
|
</div> |
|
{chatAvailable && !chatDisabled && <UserDropdown />} |
|
{!chatAvailable && !chatDisabled && ( |
|
<Tooltip title="Chat is available when the stream is live." placement="left"> |
|
<Tag style={{ cursor: 'pointer' }}>Chat offline</Tag> |
|
</Tooltip> |
|
)} |
|
</AntHeader> |
|
); |
|
export default Header;
|
|
|