import Link from "next/link";
import Head from "next/head";
import { Container, CssBaseline, NoSsr } from "@material-ui/core";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import MaterialLink from "@material-ui/core/Link";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import { useUser } from "../utils/auth/useUser";
import AuthRequired from "./authRequired";
const useStyles = makeStyles((theme) => ({
"@global": {
ul: {
margin: 0,
padding: 0,
listStyle: "none",
},
},
appBar: {
borderBottom: `1px solid ${theme.palette.divider}`,
},
toolbar: {
flexWrap: "wrap",
},
toolbarTitle: {
flexGrow: 1,
},
link: {
margin: theme.spacing(1, 1.5),
},
heroContent: {
padding: theme.spacing(8, 0, 6),
},
cardHeader: {
backgroundColor:
theme.palette.type === "light"
? theme.palette.grey[200]
: theme.palette.grey[700],
},
cardPricing: {
display: "flex",
justifyContent: "center",
alignItems: "baseline",
marginBottom: theme.spacing(2),
},
footer: {
borderTop: `1px solid ${theme.palette.divider}`,
marginTop: theme.spacing(8),
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3),
[theme.breakpoints.up("sm")]: {
paddingTop: theme.spacing(6),
paddingBottom: theme.spacing(6),
},
},
}));
export default function DefaultLayout({
children,
title = "Commander League",
requiresAuth = false,
}) {
const classes = useStyles();
const { user, logout } = useUser();
const renderAuthButtons = () => {
if (user) {
return (
);
}
return (
);
};
return (
{title}
Commander League
{renderAuthButtons()}
{/* */}
{!user && requiresAuth ? : children}
{/* */}
);
}