1import React from "react";
 2import { Link, Outlet } from "react-router-dom";
 3
 4import { useUser } from "./useUser";
 5
 6import styles from "./Page.module.scss";
 7
 8export const Page = () => {
 9	const { user, logout } = useUser();
10
11	return (
12		<div className={styles.page}>
13			<div className={styles.header}>
14				<Link to="/" className={styles.link + " " + styles.homeLink}>
15					The Sundown Vault
16				</Link>
17				{user.loading ? (
18					<div className={styles.user}>Loading...</div>
19				) : user.value === undefined ? (
20					<Link to="/login" className={styles.link + " " + styles.login}>
21						Login
22					</Link>
23				) : (
24					<>
25						<Link to="/secret/my" className={styles.link}>
26							My Secrets
27						</Link>
28						<Link to="/secret/create" className={styles.link}>
29							Create Secret
30						</Link>
31						<div className={styles.user}>{user.value.user}</div>
32						<div className={styles.link} onClick={logout}>
33							Logout
34						</div>
35					</>
36				)}
37			</div>
38			<div className={styles.content}>
39				<Outlet />
40			</div>
41		</div>
42	);
43};