103 lines
2.6 KiB
TypeScript
Executable File
103 lines
2.6 KiB
TypeScript
Executable File
import { Breadcrumbs } from "@mantine/core";
|
|
import { type ReactElement } from "react";
|
|
import { Link } from "react-router";
|
|
import "./Breadcrumbs.css";
|
|
import { routes } from "Routes/Routes";
|
|
import { useLocation } from "react-router";
|
|
|
|
function getSubPaths(path: string) {
|
|
const parts = path.split("/").filter(Boolean);
|
|
const result = ["/"];
|
|
|
|
let current = "";
|
|
for (const part of parts) {
|
|
current += "/" + part;
|
|
result.push(current);
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
function testEqual(path: string, pattern: string) {
|
|
const patternParts = pattern.split("/").filter(Boolean);
|
|
const pathParts = path.split("/").filter(Boolean);
|
|
|
|
// Length must match
|
|
if (patternParts.length !== pathParts.length) {
|
|
return false;
|
|
}
|
|
|
|
for (let i = 0; i < patternParts.length; i++) {
|
|
const patternPart = patternParts[i];
|
|
const pathPart = pathParts[i];
|
|
|
|
// If pattern starts with ":" it's a variable → always matches
|
|
if (patternPart.startsWith(":")) {
|
|
continue;
|
|
}
|
|
|
|
// Otherwise must match exactly
|
|
if (patternPart !== pathPart) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function BreadCrumbs() {
|
|
const unique_matches: string[] = getSubPaths(useLocation().pathname);
|
|
|
|
//find the breadcrumbs for the matched pathes
|
|
const elements: ReactElement[] = [];
|
|
for (const prop in routes) {
|
|
for (const u_match in unique_matches) {
|
|
if (testEqual(unique_matches[u_match], routes[prop].path)) {
|
|
for (const i in routes[prop].breadcrumbs(unique_matches[u_match])) {
|
|
if (elements.length + 1 != unique_matches.length) {
|
|
elements.push(
|
|
<Link
|
|
className="invisible_link"
|
|
to={unique_matches[u_match]}
|
|
key={unique_matches[u_match]}
|
|
>
|
|
{routes[prop].breadcrumbs(unique_matches[u_match])[i]}
|
|
</Link>,
|
|
);
|
|
} else {
|
|
elements.push(
|
|
<div
|
|
className="highlighted_breadcrumb"
|
|
key={unique_matches[u_match]}
|
|
>
|
|
{routes[prop].breadcrumbs(unique_matches[u_match])[i]}
|
|
</div>,
|
|
);
|
|
}
|
|
}
|
|
//last breadcrumb
|
|
}
|
|
}
|
|
}
|
|
|
|
//wrong count of breadcrumbs found, meaning error
|
|
if (elements.length != unique_matches.length) {
|
|
elements.push(
|
|
<div className="highlighted_breadcrumb" key={routes.ErrorPage.path}>
|
|
{routes.ErrorPage.breadcrumbs("")}
|
|
</div>,
|
|
);
|
|
}
|
|
|
|
const isGood = elements.length > 1;
|
|
|
|
return (
|
|
<Breadcrumbs separator="/" mb="xs">
|
|
{isGood && elements}
|
|
{!isGood && <p></p>}
|
|
</Breadcrumbs>
|
|
);
|
|
}
|
|
|
|
export default BreadCrumbs;
|