Moved breadcrum navigation into its own component

2 files changed, 108 insertions, 0 deletions

diff --git a/frontend/src/components/BreadcrumbNav/BreadcrumbNav.module.css b/frontend/src/components/BreadcrumbNav/BreadcrumbNav.module.css
new file mode 100644
index 0000000..9821972
--- /dev/null
+++ b/frontend/src/components/BreadcrumbNav/BreadcrumbNav.module.css
@@ -0,0 +1,36 @@
+.container {
+    display: flex;
+    margin-top: 42px;
+    margin-bottom: 16px;
+    margin-left: 48px;
+    gap: 2px;
+}
+
+.crumb {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background-color: var(--color-block);
+    padding: 6px 16px;
+    transition: all 0.1s ease;
+    font-size: 22px;
+}
+
+.crumb:hover {
+    background-color: var(--color-panel);
+}
+
+.crumb.first {
+    border-top-left-radius: 1000px;
+    border-bottom-left-radius: 1000px;
+}
+
+.crumb.middle {
+    border-radius: 0px;
+}
+
+.crumb.last,
+.crumb.first.last {
+    border-top-right-radius: 1000px;
+    border-bottom-right-radius: 1000px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/BreadcrumbNav/BreadcrumbNav.tsx b/frontend/src/components/BreadcrumbNav/BreadcrumbNav.tsx
new file mode 100644
index 0000000..7c4af15
--- /dev/null
+++ b/frontend/src/components/BreadcrumbNav/BreadcrumbNav.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+
+import styles from "./BreadcrumbNav.module.css";
+
+export interface Breadcrumb {
+    to: string;
+    label: string;
+};
+
+interface BreadcrumbNavProps {
+    chapter?: Breadcrumb;
+};
+
+const BreadcrumbNav: React.FC<BreadcrumbNavProps> = ({ chapter }) => {
+    const [breadcrumbs, setBreadcrumbs] = React.useState<Breadcrumb[]>([]);
+
+    const path = useLocation();
+
+    React.useEffect(() => {
+        let _paths = path.pathname.split("/").filter(Boolean);
+        console.log(_paths);
+        let _breadcrumbs: Breadcrumb[] = [];
+
+        if (_paths.length >= 2) {
+            _breadcrumbs.push({
+                to: "/games",
+                label: "Games List"
+            })
+
+            // To test 3 crumbs
+            // _breadcrumbs.push({
+            //     to: "/games",
+            //     label: "Test"
+            // })
+
+            if (_paths[0] == "maps") {
+                if (chapter) {
+                    _breadcrumbs.push({
+                        to: chapter.to,
+                        label: chapter.label
+                    });
+                }
+            }
+        }
+
+        setBreadcrumbs(_breadcrumbs);
+    }, [path])
+
+    return (
+        <nav className={styles.container}>
+            {breadcrumbs.map((crumb, i) => {
+                let _styles = ``;
+
+                if (i == 0) {
+                    _styles += `${styles.first} `;
+                }
+
+                if (i + 1 == breadcrumbs.length) {
+                    _styles += `${styles.last}`;
+                }
+
+                return <Link className={`${styles.crumb} ${_styles}`} key={i} to={crumb.to}>
+                    <i className="triangle"></i>
+                    <span className="translate-y-[-2px]">{crumb.label}</span>
+                </Link>
+            })}
+        </nav>
+    )
+}
+
+export default BreadcrumbNav;