Suggest task flow pt1

src/components/FamilyAcc/FamilySettings/index.jsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
+import CustomBreadcrumb from "../../Breadcrumb/CustomBreadcrumb";
 import Icons from "../../Helpers/Icons";
 import Layout from "../../Partials/Layout";
 import { AddFamily, FamilyBanner, Relatives } from "./Tabs";
 
 const FamilySettings = () => {
-  let {state} = useLocation()
+  let { state } = useLocation();
   const tabs = [
     {
       id: 1,
@@ -58,15 +59,42 @@ const FamilySettings = () => {
           {/* heading */}
           <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 className={``}>Family Settings</span>
-              </h1>
+              <CustomBreadcrumb
+                title={"Family Settings"}
+                breadcrumb={[
+                  { link: "/", title: "Home" },
+                  {
+                    link: "/acc-family",
+                    title: "Family Account",
+                  },
+                  {
+                    link: "/familysettings",
+                    title: "Family Settings",
+                    active: true,
+                  },
+                ]}
+              />
             </div>
-            <Link to="/acc-family" className="flex gap-2 items-center text-dark-gray dark:text-white">
-              <svg className="w-5 h-5 rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
+            <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>
-              Family
+
+              <span>Family</span>
             </Link>
           </div>