element-call/src/Header.jsx

81 lines
1.9 KiB
React
Raw Normal View History

2021-08-20 00:49:45 +00:00
import classNames from "classnames";
import React from "react";
2021-12-03 01:21:37 +00:00
import { Link } from "react-router-dom";
2021-08-20 00:49:45 +00:00
import styles from "./Header.module.css";
2021-11-30 00:19:48 +00:00
import { ReactComponent as LogoIcon } from "./Logo.svg";
import { ReactComponent as VideoIcon } from "./icons/Video.svg";
import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
2021-12-03 01:21:37 +00:00
import { HeaderDropdownItem, UserMenu } from "./RoomButton";
2021-08-20 00:49:45 +00:00
2021-11-30 00:19:48 +00:00
export function Header({ children, className, ...rest }) {
2021-08-20 00:49:45 +00:00
return (
2021-11-30 00:19:48 +00:00
<header className={classNames(styles.header, className)} {...rest}>
2021-08-20 00:49:45 +00:00
{children}
2021-11-30 00:19:48 +00:00
</header>
2021-08-20 00:49:45 +00:00
);
}
2021-11-30 00:19:48 +00:00
export function LeftNav({ children, className, ...rest }) {
2021-08-20 00:49:45 +00:00
return (
2021-11-30 00:19:48 +00:00
<div
className={classNames(styles.nav, styles.leftNav, className)}
{...rest}
>
2021-08-20 00:49:45 +00:00
{children}
</div>
);
}
2021-08-20 23:23:12 +00:00
2021-11-30 00:19:48 +00:00
export function RightNav({ children, className, ...rest }) {
2021-08-20 23:23:12 +00:00
return (
2021-11-30 00:19:48 +00:00
<div
className={classNames(styles.nav, styles.rightNav, className)}
{...rest}
>
{children}
</div>
2021-08-20 23:23:12 +00:00
);
}
2021-12-03 01:21:37 +00:00
export function HeaderLogo() {
return (
<Link className={styles.logo} to="/">
<LogoIcon width={32} height={32} />
</Link>
);
}
export function RoomHeaderInfo({ roomName }) {
return (
<>
<div className={styles.roomAvatar}>
<VideoIcon width={16} height={16} />
</div>
<h3>{roomName}</h3>
</>
);
}
export function RoomSetupHeaderInfo({ onBack, roomName }) {
return (
<button className={styles.backButton} onClick={onBack}>
<ArrowLeftIcon width={16} height={16} />
<RoomHeaderInfo roomName={roomName} />
</button>
);
}
export function UserDropdownMenu({ userName, signedIn, onLogout }) {
if (!signedIn) {
return null;
}
return (
<UserMenu userName={userName}>
<HeaderDropdownItem onClick={onLogout} className={styles.signOutButton}>
Sign Out
</HeaderDropdownItem>
</UserMenu>
);
}