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 { 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 router = useRouter();
|
const linkPath = path.split("/");
|
||||||
|
|
||||||
const breadcrumbs = useMemo(() => {
|
|
||||||
const linkPath = router.asPath.split("/");
|
|
||||||
linkPath.shift();
|
linkPath.shift();
|
||||||
return linkPath.map((path, i) => ({
|
return linkPath.map((path, i) => ({
|
||||||
breadcrumb: path,
|
breadcrumb: path,
|
||||||
href: "/" + linkPath.slice(0, i + 1).join("/"),
|
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) {
|
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>
|
@ -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
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