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

View File

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