Add login and signature

This commit is contained in:
Kasper Juul Hermansen 2021-10-14 21:28:06 +02:00
parent 471165d949
commit a67f3c402b
4 changed files with 51 additions and 17 deletions

View File

@ -1,26 +1,29 @@
import { FC, useMemo } from "react"; import React, { FC, useMemo } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Breadcrumbs, Link as MuiLink } from "@mui/material"; import { Breadcrumbs, Button, Link as MuiLink } from "@mui/material";
import Link from "next/link"; import Link from "next/link";
export const DefaultNavbar: FC = () => { const getPathAsContinuousLinks = (path: string) => {
const linkPath = path.split("/");
linkPath.shift();
return linkPath.map((path, i) => ({
breadcrumb: path,
href: "/" + linkPath.slice(0, i + 1).join("/"),
}));
};
export const BreadCrumbs: FC = () => {
const router = useRouter(); const router = useRouter();
const breadcrumbs = useMemo(() => { const breadcrumbs = useMemo(
const linkPath = router.asPath.split("/"); () => getPathAsContinuousLinks(router.asPath),
linkPath.shift(); [router.asPath]
return linkPath.map((path, i) => ({ );
breadcrumb: path,
href: "/" + linkPath.slice(0, i + 1).join("/"),
}));
}, [router.asPath]);
if (!breadcrumbs) { if (!breadcrumbs) {
return null; return null;
} }
console.log(breadcrumbs);
return ( return (
<Breadcrumbs aria-label="breadcrumb"> <Breadcrumbs aria-label="breadcrumb">
<Link href="/" passHref> <Link href="/" passHref>

View File

@ -1,7 +1,16 @@
import { FC } from "react"; import React, { FC } from "react";
import { AppBar, Box, Container, Toolbar, Typography } from "@mui/material"; import {
AppBar,
Box,
Button,
Container,
Link as MuiLink,
Toolbar,
Typography,
} from "@mui/material";
import { Styling } from "../general/styling"; import { Styling } from "../general/styling";
import { DefaultNavbar } from "./defaultNavbar"; import { BreadCrumbs } from "./breadCrumbs";
import Link from "next/link";
export const DefaultLayout: FC = ({ children }) => ( export const DefaultLayout: FC = ({ children }) => (
<Styling> <Styling>
@ -20,11 +29,23 @@ export const DefaultLayout: FC = ({ children }) => (
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
OpenFood OpenFood
</Typography> </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> </Toolbar>
</AppBar> </AppBar>
<Box sx={{ flexGrow: 1, pt: 2 }}> <Box sx={{ flexGrow: 1, pt: 2 }}>
<Container maxWidth="sm"> <Container maxWidth="sm">
<DefaultNavbar /> <BreadCrumbs />
<Box sx={{ p: 2 }}>{children}</Box> <Box sx={{ p: 2 }}>{children}</Box>
</Container> </Container>

5
pages/auth/login.tsx Normal file
View File

@ -0,0 +1,5 @@
const LoginPage = () => {
return <div>Login page</div>;
};
export default LoginPage;

5
pages/auth/sign-up.tsx Normal file
View File

@ -0,0 +1,5 @@
const SignUpPage = () => {
return <div>Sign up page</div>;
};
export default SignUpPage;