2021-08-20 00:49:45 +00:00
|
|
|
import classNames from "classnames";
|
2021-12-07 19:59:57 +00:00
|
|
|
import React, { useRef } 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-07 19:59:57 +00:00
|
|
|
import { useButton } from "@react-aria/button";
|
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>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-12-07 19:59:57 +00:00
|
|
|
export function RoomSetupHeaderInfo({ roomName, ...rest }) {
|
|
|
|
const ref = useRef();
|
|
|
|
const { buttonProps } = useButton(rest, ref);
|
2021-12-03 01:21:37 +00:00
|
|
|
return (
|
2021-12-07 19:59:57 +00:00
|
|
|
<button className={styles.backButton} ref={ref} {...buttonProps}>
|
2021-12-03 01:21:37 +00:00
|
|
|
<ArrowLeftIcon width={16} height={16} />
|
|
|
|
<RoomHeaderInfo roomName={roomName} />
|
|
|
|
</button>
|
|
|
|
);
|
|
|
|
}
|