owncast/web/components/ui/Header/Header.tsx
2022-05-26 11:31:45 -07:00

30 lines
810 B
TypeScript

import { Layout, Tag, Tooltip } from 'antd';
import { OwncastLogo, UserDropdown } from '../../common';
import s from './Header.module.scss';
const { Header } = Layout;
interface Props {
name: string;
chatAvailable: boolean;
}
export default function HeaderComponent({ name = 'Your stream title', chatAvailable }: Props) {
return (
<Header className={`${s.header}`}>
<div className={`${s.logo}`}>
<OwncastLogo variant="contrast" />
<span>{name}</span>
</div>
{chatAvailable && <UserDropdown />}
{!chatAvailable && (
<Tooltip title="Chat is available when the stream is live." placement="left">
<Tag color="processing" style={{ cursor: 'pointer' }}>
Chat offline
</Tag>
</Tooltip>
)}
</Header>
);
}