owncast/web/components/ui/Header/Header.tsx
2022-05-13 14:44:16 -07:00

27 lines
745 B
TypeScript

import { Layout } from 'antd';
import { useRecoilValue } from 'recoil';
import { ChatState } from '../../../interfaces/application-state';
import { OwncastLogo, UserDropdown } from '../../common';
import { chatStateAtom } from '../../stores/ClientConfigStore';
import s from './Header.module.scss';
const { Header } = Layout;
interface Props {
name: string;
}
export default function HeaderComponent({ name = 'Your stream title' }: Props) {
const chatState = useRecoilValue<ChatState>(chatStateAtom);
return (
<Header className={`${s.header}`}>
<div className={`${s.logo}`}>
<OwncastLogo variant="contrast" />
<span>{name}</span>
</div>
<UserDropdown chatState={chatState} />
</Header>
);
}