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"; import Link from "next/link"; 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/> <Box sx={{p: 2, mt: 2}}>{children}</Box> </Container> </Box> </Box> </Styling> );