Add login and signature

components/layout/breadCrumbs.tsx

@@ -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 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 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) {
     return null;
   }
 
-  console.log(breadcrumbs);
-
   return (
     <Breadcrumbs aria-label="breadcrumb">
       <Link href="/" passHref>

components/layout/defaultLayout.tsx

@@ -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 { 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>

pages/auth/login.tsx

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

pages/auth/sign-up.tsx

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