From 129e796852eebbfae0ff4e07438f2176aa9a9a52 Mon Sep 17 00:00:00 2001
From: Schneider Roland <roland.schneider@extern.a1.at>
Date: Sun, 26 Jan 2025 23:22:13 +0100
Subject: [PATCH] add breadcrumbs component

---
 yoga-app/src/app/about/page.tsx               |  4 ++
 .../src/components/breadcrumbs.component.tsx  | 69 +++++++++++++++++++
 .../src/components/subHeader.component.tsx    |  5 +-
 3 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 yoga-app/src/components/breadcrumbs.component.tsx

diff --git a/yoga-app/src/app/about/page.tsx b/yoga-app/src/app/about/page.tsx
index 2d348b7..ad7be94 100644
--- a/yoga-app/src/app/about/page.tsx
+++ b/yoga-app/src/app/about/page.tsx
@@ -58,3 +58,7 @@ export default async function About() {
 
     );
 }
+
+export const getBreadCrumbName = () => {
+    return "Rólunk;"
+}
diff --git a/yoga-app/src/components/breadcrumbs.component.tsx b/yoga-app/src/components/breadcrumbs.component.tsx
new file mode 100644
index 0000000..29ec1ff
--- /dev/null
+++ b/yoga-app/src/components/breadcrumbs.component.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import React, { ReactNode } from 'react'
+
+import {usePathname, useRouter} from 'next/navigation'
+import Link from 'next/link'
+
+type Props = {
+}
+
+const pathToBreadCrumbs = (path: string) => {
+    const mapping: Record<string, string> =  {
+        '/' : 'Kezdőlap',
+        'about' : 'Rólam'
+    }
+    if ( mapping.hasOwnProperty(path)){
+        return mapping[path];
+    }
+    return path;
+}
+
+const NextBreadcrumb = () => {
+
+    const paths = usePathname()
+    const pathNames = paths.split('/').filter( path => path )
+
+
+
+
+    return (
+        <div className="btn_wrapper">
+            <span className="sub_home_span">{pathToBreadCrumbs( "/" )} </span>
+            {
+                pathNames.map((value,index) => {
+
+                    return (
+                        <>
+                            <i className="fa-solid fa-angles-right" aria-hidden="true"></i>
+                            <span className="sub_span">{pathToBreadCrumbs( value )}</span>
+                        </>
+                    )
+                })
+            }
+        </div>
+        // <div>
+        //     <ul className={containerClasses}>
+        //         <li className={listClasses}><Link href={'/'}>{homeElement}</Link></li>
+        //         {pathNames.length > 0 && separator}
+        //         {
+        //             pathNames.map( (link, index) => {
+        //                 let href = `/${pathNames.slice(0, index + 1).join('/')}`
+        //                 let itemClasses = paths === href ? `${listClasses} ${activeClasses}` : listClasses
+        //                 let itemLink = capitalizeLinks ? link[0].toUpperCase() + link.slice(1, link.length) : link
+        //                 return (
+        //                     <React.Fragment key={index}>
+        //                         <li className={itemClasses} >
+        //                             <Link href={href}>{itemLink}</Link>
+        //                         </li>
+        //                         {pathNames.length !== index + 1 && separator}
+        //                     </React.Fragment>
+        //                 )
+        //             })
+        //         }
+        //     </ul>
+        // </div>
+    )
+}
+
+export default NextBreadcrumb
diff --git a/yoga-app/src/components/subHeader.component.tsx b/yoga-app/src/components/subHeader.component.tsx
index c95b6c4..0852332 100644
--- a/yoga-app/src/components/subHeader.component.tsx
+++ b/yoga-app/src/components/subHeader.component.tsx
@@ -2,6 +2,7 @@ import YogaImageComponent from "@/components/yoga.image.component";
 import Nav from "@/components/nav.component";
 import {MAIN_MENU} from "@/util/const";
 import {HeaderB} from "@/types/generated-strapi-interfaces/components/yoga-site/HeaderB";
+import NextBreadcrumb from "@/components/breadcrumbs.component";
 
 
 export interface Props extends HeaderB{
@@ -18,9 +19,7 @@ const SubHeaderComponent = ({header1,header2,description}: Props) =>{
                             <div className="banner-section-content">
                                 <h1 data-aos="fade-up">{header1}</h1>
                                 <p data-aos="fade-right">{description}</p>
-                                <div className="btn_wrapper">
-                                    <span className="sub_home_span">Home </span><i className="fa-solid fa-angles-right" aria-hidden="true"></i><span className="sub_span"> About</span>
-                                </div>
+                                <NextBreadcrumb  />
                             </div>
                         </div>
                     </div>