Added tabs as individual components

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

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

src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Relatives = () => {
+  return (
+    <div>Relatives</div>
+  )
+}
+
+export default Relatives

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}

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];