element-call/src/Header.jsx

80 lines
1.9 KiB
React
Raw Normal View History

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-12-07 20:20:05 +00:00
import { ReactComponent as Logo } from "./icons/Logo.svg";
2021-11-30 00:19:48 +00:00
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";
2022-01-05 19:52:23 +00:00
import { Subtitle } from "./typography/Typography";
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-12-23 22:40:23 +00:00
export function LeftNav({ children, className, hideMobile, ...rest }) {
2021-08-20 00:49:45 +00:00
return (
2021-11-30 00:19:48 +00:00
<div
2021-12-23 22:40:23 +00:00
className={classNames(
styles.nav,
styles.leftNav,
{ [styles.hideMobile]: hideMobile },
className
)}
2021-11-30 00:19:48 +00:00
{...rest}
>
2021-08-20 00:49:45 +00:00
{children}
</div>
);
}
2021-08-20 23:23:12 +00:00
2022-01-05 00:00:13 +00:00
export function RightNav({ children, className, hideMobile, ...rest }) {
2021-08-20 23:23:12 +00:00
return (
2021-11-30 00:19:48 +00:00
<div
2022-01-05 00:00:13 +00:00
className={classNames(
styles.nav,
styles.rightNav,
{ [styles.hideMobile]: hideMobile },
className
)}
2021-11-30 00:19:48 +00:00
{...rest}
>
{children}
</div>
2021-08-20 23:23:12 +00:00
);
}
2021-12-03 01:21:37 +00:00
2022-01-05 00:00:13 +00:00
export function HeaderLogo({ className }) {
2021-12-03 01:21:37 +00:00
return (
2022-01-05 00:00:13 +00:00
<Link className={classNames(styles.headerLogo, className)} to="/">
2021-12-07 20:20:05 +00:00
<Logo />
2021-12-03 01:21:37 +00:00
</Link>
);
}
export function RoomHeaderInfo({ roomName }) {
return (
<>
<div className={styles.roomAvatar}>
<VideoIcon width={16} height={16} />
</div>
2022-01-05 19:52:23 +00:00
<Subtitle fontWeight="semiBold">{roomName}</Subtitle>
2021-12-03 01:21:37 +00:00
</>
);
}
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>
);
}