openfood/components/layout/breadCrumbs.tsx

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>
  );
};