From 16f92803548312c0ec46e3e1c3fb99b974e4a7fe Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 26 Apr 2024 17:21:21 +0300
Subject: [PATCH] feat(breadcrumb): render breadcrumbs from the hook

---
 .../General/Breadcrumb/Breadcrumb.tsx         | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/General/Breadcrumb/Breadcrumb.tsx b/src/components/General/Breadcrumb/Breadcrumb.tsx
index 28e3169b..015eb622 100644
--- a/src/components/General/Breadcrumb/Breadcrumb.tsx
+++ b/src/components/General/Breadcrumb/Breadcrumb.tsx
@@ -1,5 +1,14 @@
 import { XStack } from 'tamagui'
+import useBreadcrumbs, { BreadcrumbsRoute } from 'use-react-router-breadcrumbs'
+import { NavLink } from 'react-router-dom'
+
 import BreadcrumbElement from './BreadcrumbElement'
+import {
+  MANAGE_VALIDATOR_SUB_PATHS,
+  PATHS,
+  VALIDATOR_ONBOARDING_SUB_PATHS,
+} from '../../../constants'
+
 const CustomPropsBreadcrumb = ({ someProp }: any) => <span>{someProp}</span>
 
 const routes = [
@@ -75,14 +84,14 @@ const routes = [
 ]
 
 const Breadcrumb = () => {
+  const breadcrumbs = useBreadcrumbs(routes as BreadcrumbsRoute<string>[])
 
   return (
     <XStack space={'$2'} alignItems="center">
-      {breadcrumbList.map((element, index) => (
-        <BreadcrumbElement
-          element={element}
-          isLastElement={index === breadcrumbList.length - 1}
-        />
+      {breadcrumbs.map(({ match, breadcrumb }) => (
+        <NavLink key={match.pathname} to={match.pathname}>
+          {breadcrumb}
+        </NavLink>
       ))}
     </XStack>
   )