55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
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>
|
|
);
|
|
};
|