From 9565ca0d35760035b9be54b3421c37f2519b1105 Mon Sep 17 00:00:00 2001
From: ebube <ebube.ojinta@chiefsoft.com>
Date: Tue, 21 Nov 2023 07:22:33 -0800
Subject: [PATCH 1/3] Fixed typo causing error displays in the console.log

---
 src/components/FamilyAcc/FamilySettings/index.jsx | 2 +-
 src/components/FamilyAcc/FamilyTable.jsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FamilyAcc/FamilySettings/index.jsx b/src/components/FamilyAcc/FamilySettings/index.jsx
index e0cc8cf..2391cbf 100644
--- a/src/components/FamilyAcc/FamilySettings/index.jsx
+++ b/src/components/FamilyAcc/FamilySettings/index.jsx
@@ -86,7 +86,7 @@ const FamilySettings = () => {
                   ))}
                 </ul>
               </div>
-              <div class="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
+              <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
               <div className="flex-1">
                 <div className="tab-item">{selectedComponent}</div>
               </div>
diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx
index 0d30343..e251974 100644
--- a/src/components/FamilyAcc/FamilyTable.jsx
+++ b/src/components/FamilyAcc/FamilyTable.jsx
@@ -149,7 +149,7 @@ export default function FamilyTable({
               className="w-[0.7rem]"
             >
               <path
-                fill-rule="evenodd"
+                fillRule="evenodd"
                 d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
                 // fill=""
                 className="color000000 svgShape fill-[#fff]"

From 97e33449537abcc6bf231109d0ca5e332e617927 Mon Sep 17 00:00:00 2001
From: ebube <ebube.ojinta@chiefsoft.com>
Date: Tue, 21 Nov 2023 07:32:36 -0800
Subject: [PATCH 2/3] Added tabs as individual components

---
 .../FamilyAcc/FamilySettings/Tabs/AddFamily.jsx          | 9 +++++++++
 .../FamilyAcc/FamilySettings/Tabs/FamilyBanner.jsx       | 9 +++++++++
 .../FamilyAcc/FamilySettings/Tabs/Relatives.jsx          | 9 +++++++++
 src/components/FamilyAcc/FamilySettings/Tabs/index.js    | 5 +++++
 src/components/FamilyAcc/FamilySettings/index.jsx        | 7 ++++---
 5 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/components/FamilyAcc/FamilySettings/Tabs/AddFamily.jsx
 create mode 100644 src/components/FamilyAcc/FamilySettings/Tabs/FamilyBanner.jsx
 create mode 100644 src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx
 create mode 100644 src/components/FamilyAcc/FamilySettings/Tabs/index.js

diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/AddFamily.jsx b/src/components/FamilyAcc/FamilySettings/Tabs/AddFamily.jsx
new file mode 100644
index 0000000..b0d4b0e
--- /dev/null
+++ b/src/components/FamilyAcc/FamilySettings/Tabs/AddFamily.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AddFamily = () => {
+  return (
+    <div>Add Family</div>
+  )
+}
+
+export default AddFamily
\ No newline at end of file
diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/FamilyBanner.jsx b/src/components/FamilyAcc/FamilySettings/Tabs/FamilyBanner.jsx
new file mode 100644
index 0000000..28b28ce
--- /dev/null
+++ b/src/components/FamilyAcc/FamilySettings/Tabs/FamilyBanner.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const FamilyBanner = () => {
+  return (
+    <div>Family Banner</div>
+  )
+}
+
+export default FamilyBanner
\ No newline at end of file
diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx b/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx
new file mode 100644
index 0000000..3eeff60
--- /dev/null
+++ b/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Relatives = () => {
+  return (
+    <div>Relatives</div>
+  )
+}
+
+export default Relatives
\ No newline at end of file
diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/index.js b/src/components/FamilyAcc/FamilySettings/Tabs/index.js
new file mode 100644
index 0000000..0b784c3
--- /dev/null
+++ b/src/components/FamilyAcc/FamilySettings/Tabs/index.js
@@ -0,0 +1,5 @@
+import AddFamily from "./AddFamily";
+import FamilyBanner from "./FamilyBanner";
+import Relatives from "./Relatives";
+
+export {AddFamily, FamilyBanner, Relatives}
\ No newline at end of file
diff --git a/src/components/FamilyAcc/FamilySettings/index.jsx b/src/components/FamilyAcc/FamilySettings/index.jsx
index 2391cbf..71d1ed3 100644
--- a/src/components/FamilyAcc/FamilySettings/index.jsx
+++ b/src/components/FamilyAcc/FamilySettings/index.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import Icons from "../../Helpers/Icons";
 import Layout from "../../Partials/Layout";
+import { AddFamily, FamilyBanner, Relatives } from "./Tabs";
 
 const FamilySettings = () => {
   const tabs = [
@@ -40,9 +41,9 @@ const FamilySettings = () => {
   }, [tab]);
 
   const tabComponents = {
-    add_family: "Add Family",
-    relatives: "Relatives",
-    family_banner: "Family Banner",
+    add_family: <AddFamily />,
+    relatives: <Relatives />,
+    family_banner: <FamilyBanner />,
   };
 
   const defaultTabComponent = Array(tabComponents)[0];

From 18c4f31322e31cff27fadabb3cf5854616be9bbd Mon Sep 17 00:00:00 2001
From: ebube <ebube.ojinta@chiefsoft.com>
Date: Tue, 21 Nov 2023 08:02:11 -0800
Subject: [PATCH 3/3] seen the issue

---
 src/components/FamilyAcc/FamilySettings/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FamilyAcc/FamilySettings/index.jsx b/src/components/FamilyAcc/FamilySettings/index.jsx
index 71d1ed3..d00cf1b 100644
--- a/src/components/FamilyAcc/FamilySettings/index.jsx
+++ b/src/components/FamilyAcc/FamilySettings/index.jsx
@@ -46,7 +46,7 @@ const FamilySettings = () => {
     family_banner: <FamilyBanner />,
   };
 
-  const defaultTabComponent = Array(tabComponents)[0];
+  const defaultTabComponent = Array(tabComponents)[0].add_family;
 
   const selectedComponent = tabComponents[tab] || defaultTabComponent;