Add login and signature

components/layout/breadCrumbs.tsx

@@ -0,0 +1,54 @@
+import React, { FC, useMemo } from "react";
+import { useRouter } from "next/router";
+import { Breadcrumbs, Button, Link as MuiLink } from "@mui/material";
+import Link from "next/link";
+
+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(
+    () => getPathAsContinuousLinks(router.asPath),
+    [router.asPath]
+  );
+
+  if (!breadcrumbs) {
+    return null;
+  }
+
+  return (
+    <Breadcrumbs aria-label="breadcrumb">
+      <Link href="/" passHref>
+        <MuiLink
+          underline="hover"
+          color={
+            breadcrumbs.length === 1 && breadcrumbs[0].href == "/"
+              ? "text.primary"
+              : "inherit"
+          }
+        >
+          home
+        </MuiLink>
+      </Link>
+
+      {breadcrumbs.map((breadcrumb, i) => (
+        <Link key={breadcrumb.href} href={breadcrumb.href} passHref>
+          <MuiLink
+            underline="hover"
+            color={i === breadcrumbs.length - 1 ? "text.primary" : "inherit"}
+          >
+            {breadcrumb.breadcrumb}
+          </MuiLink>
+        </Link>
+      ))}
+    </Breadcrumbs>
+  );
+};