Initial commit

src/Routes/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,104 @@
+import { Breadcrumbs } from "@mantine/core";
+import { type ReactElement } from "react";
+import { Link, type UIMatch } 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);
+
+  console.log(unique_matches);
+  //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)) {
+        console.log(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;