From 3cd8b6e57447051aa8845dcd45a538c6aa1435d5 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Fri, 22 Mar 2024 12:45:34 +0100
Subject: [PATCH] added link to family page

---
 src/components/FamilyAcc/FamilyManage.jsx  | 39 ++++++++++++++++++++--
 src/components/Helpers/DataIteration.jsx   |  2 +-
 src/components/MarketPlace/MainSection.jsx |  4 +--
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/components/FamilyAcc/FamilyManage.jsx b/src/components/FamilyAcc/FamilyManage.jsx
index 0321448..aa4780f 100644
--- a/src/components/FamilyAcc/FamilyManage.jsx
+++ b/src/components/FamilyAcc/FamilyManage.jsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import FamilyManageTabs from "./FamilyManageTabs";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function FamilyManage() {
   const [selectTab, setValue] = useState("today");
@@ -34,7 +35,7 @@ export default function FamilyManage() {
         <div className="notification-page w-full mb-10">
           <div className="notification-wrapper w-full">
             {/* heading */}
-            <div className="sm:flex justify-between items-center mb-6">
+            {/* <div className="sm:flex justify-between items-center mb-6">
               <div className="mb-5 sm:mb-0">
                 <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
                   <span
@@ -50,6 +51,40 @@ export default function FamilyManage() {
                   className="relative"
                 ></div>
               </div>
+            </div> */}
+            <div className="w-full mb-5 flex justify-between items-center">
+              <div className="">
+                  <CustomBreadcrumb 
+                  title = {'Manage Family'}
+                  breadcrumb={
+                      [
+                      { link: "/", title: "Home" },
+                      { link: "/manage-family", title: "Manage Family", active: true},
+                      ]
+                  }
+                  />
+              </div>
+              <Link
+                className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#76a5df] text-white font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
+                to="/acc-family"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                  className="w-4 h-4"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
+                  />
+                </svg>
+
+              <span>Family</span>
+            </Link>
             </div>
             <FamilyManageTabs accountDetails={accountDetails} />
           </div>
diff --git a/src/components/Helpers/DataIteration.jsx b/src/components/Helpers/DataIteration.jsx
index 422ac89..688e5f3 100644
--- a/src/components/Helpers/DataIteration.jsx
+++ b/src/components/Helpers/DataIteration.jsx
@@ -7,7 +7,7 @@ function DataIteration(props) {
       {datas &&
         datas?.length >= endLength &&
         datas?.slice(startLength, endLength)
-          .map((value) => children({ datas: value }))}
+          .map((value, index) => children({ datas: value, index }))}
     </>
   );
 }
diff --git a/src/components/MarketPlace/MainSection.jsx b/src/components/MarketPlace/MainSection.jsx
index 4d76c7b..46d74bb 100644
--- a/src/components/MarketPlace/MainSection.jsx
+++ b/src/components/MarketPlace/MainSection.jsx
@@ -109,8 +109,8 @@ export default function MainSection({
               startLength={process.env.REACT_APP_ZERO_STATE}
               endLength={products?.length}
             >
-              {({ datas }) => (
-                <div key={datas.job_uid}>
+              {({ datas, index }) => (
+                <div key={datas.job_uid+index}>
                   <AvailableJobsCard
                     contentDisplay={contentDisplay}
                     image_server={image_server}