element-call/src/Header.jsx
2022-01-05 11:52:23 -08:00

79 lines
1.9 KiB
JavaScript

import classNames from "classnames";
import React, { useRef } from "react";
import { Link } from "react-router-dom";
import styles from "./Header.module.css";
import { ReactComponent as Logo } from "./icons/Logo.svg";
import { ReactComponent as VideoIcon } from "./icons/Video.svg";
import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
import { useButton } from "@react-aria/button";
import { Subtitle } from "./typography/Typography";
export function Header({ children, className, ...rest }) {
return (
<header className={classNames(styles.header, className)} {...rest}>
{children}
</header>
);
}
export function LeftNav({ children, className, hideMobile, ...rest }) {
return (
<div
className={classNames(
styles.nav,
styles.leftNav,
{ [styles.hideMobile]: hideMobile },
className
)}
{...rest}
>
{children}
</div>
);
}
export function RightNav({ children, className, hideMobile, ...rest }) {
return (
<div
className={classNames(
styles.nav,
styles.rightNav,
{ [styles.hideMobile]: hideMobile },
className
)}
{...rest}
>
{children}
</div>
);
}
export function HeaderLogo({ className }) {
return (
<Link className={classNames(styles.headerLogo, className)} to="/">
<Logo />
</Link>
);
}
export function RoomHeaderInfo({ roomName }) {
return (
<>
<div className={styles.roomAvatar}>
<VideoIcon width={16} height={16} />
</div>
<Subtitle fontWeight="semiBold">{roomName}</Subtitle>
</>
);
}
export function RoomSetupHeaderInfo({ roomName, ...rest }) {
const ref = useRef();
const { buttonProps } = useButton(rest, ref);
return (
<button className={styles.backButton} ref={ref} {...buttonProps}>
<ArrowLeftIcon width={16} height={16} />
<RoomHeaderInfo roomName={roomName} />
</button>
);
}