Add login and signature
This commit is contained in:
parent
471165d949
commit
a67f3c402b
@ -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>
|
@ -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
5
pages/auth/login.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
const LoginPage = () => {
|
||||
return <div>Login page</div>;
|
||||
};
|
||||
|
||||
export default LoginPage;
|
5
pages/auth/sign-up.tsx
Normal file
5
pages/auth/sign-up.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
const SignUpPage = () => {
|
||||
return <div>Sign up page</div>;
|
||||
};
|
||||
|
||||
export default SignUpPage;
|
Loading…
Reference in New Issue
Block a user