openfood/components/layout/defaultLayout.tsx

48 lines
1.6 KiB
TypeScript
Raw Normal View History

2021-10-15 21:53:27 +02:00
import React, {FC} from "react";
import {AppBar, Box, Button, Container, Link as MuiLink, Toolbar, Typography,} from "@mui/material";
import {Styling} from "../general/styling";
import {BreadCrumbs} from "./breadCrumbs";
2021-10-14 21:28:06 +02:00
import Link from "next/link";
2021-10-14 20:42:49 +02:00
2021-10-15 21:53:27 +02:00
export const DefaultLayout: FC = ({children}) => (
<Styling>
<Box
sx={{
display: "flex",
width: "100%",
minHeight: "100vh",
bgcolor: "background.default",
color: "text.primary",
flexDirection: "column",
}}
>
<AppBar position="sticky">
<Toolbar>
<Typography variant="h6" component="div" sx={{flexGrow: 1}}>
OpenFood
</Typography>
<Box sx={{display: "flex", gap: 2}}>
<Link href="/auth/login" passHref>
<MuiLink>
<Button>Login</Button>
</MuiLink>
</Link>
<Link href="/auth/sign-up" passHref>
<MuiLink>
<Button>Sign up</Button>
</MuiLink>
</Link>
</Box>
</Toolbar>
</AppBar>
<Box sx={{flexGrow: 1, pt: 2}}>
<Container maxWidth="md">
<BreadCrumbs/>
2021-10-14 20:42:49 +02:00
2021-10-15 21:53:27 +02:00
<Box sx={{p: 2, mt: 2}}>{children}</Box>
</Container>
</Box>
</Box>
</Styling>
2021-10-14 20:42:49 +02:00
);