element-call/src/FullScreenView.jsx
2021-12-10 16:42:18 -08:00

49 lines
1.1 KiB
JavaScript

import React, { useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { ErrorMessage } from "./Input";
import styles from "./FullScreenView.module.css";
import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
export function FullScreenView({ children }) {
return (
<div className={styles.page}>
<Header>
<LeftNav>
<HeaderLogo />
</LeftNav>
<RightNav />
</Header>
<div className={styles.container}>
<div className={styles.content}>{children}</div>
</div>
</div>
);
}
export function ErrorView({ error }) {
const location = useLocation();
useEffect(() => {
console.error(error);
}, [error]);
return (
<FullScreenView>
<h1>Error</h1>
<ErrorMessage>{error.message}</ErrorMessage>
{location.pathname !== "/" && (
<Link className={styles.homeLink} to="/">
Return to home screen
</Link>
)}
</FullScreenView>
);
}
export function LoadingView() {
return (
<FullScreenView>
<h1>Loading...</h1>
</FullScreenView>
);
}