From cf5ae81918ef19d17fd7692e26ee9fc0eebafe49 Mon Sep 17 00:00:00 2001
From: ebube <ebube.ojinta@chiefsoft.com>
Date: Tue, 21 Nov 2023 05:58:57 -0800
Subject: [PATCH] Added tabs  for family settings

---
 .../FamilyAcc/FamilySettings/index.jsx        | 77 ++++++++++++++++++-
 1 file changed, 74 insertions(+), 3 deletions(-)

diff --git a/src/components/FamilyAcc/FamilySettings/index.jsx b/src/components/FamilyAcc/FamilySettings/index.jsx
index 82c1545..e0cc8cf 100644
--- a/src/components/FamilyAcc/FamilySettings/index.jsx
+++ b/src/components/FamilyAcc/FamilySettings/index.jsx
@@ -1,8 +1,54 @@
-import React from "react";
-import Layout from "../../Partials/Layout";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import Icons from "../../Helpers/Icons";
+import Layout from "../../Partials/Layout";
 
 const FamilySettings = () => {
+  const tabs = [
+    {
+      id: 1,
+      name: "add_family",
+      title: "Add Family",
+      iconName: "new-family",
+    },
+    {
+      id: 2,
+      name: "relatives",
+      title: "Relatives",
+      iconName: "people-hover",
+    },
+    {
+      id: 3,
+      name: "family_banner",
+      title: "Family Banner",
+      iconName: "people-hover",
+    },
+  ];
+
+  const [tab, setTab] = useState(() => {
+    // Retrieve the active tab from local storage or use the default tab
+    return localStorage.getItem("activeTab") || tabs[0].name;
+  });
+
+  const tabHandler = (value) => {
+    setTab(value);
+  };
+
+  // Update local storage when the tab changes
+  useEffect(() => {
+    localStorage.setItem("activeTab", tab);
+  }, [tab]);
+
+  const tabComponents = {
+    add_family: "Add Family",
+    relatives: "Relatives",
+    family_banner: "Family Banner",
+  };
+
+  const defaultTabComponent = Array(tabComponents)[0];
+
+  const selectedComponent = tabComponents[tab] || defaultTabComponent;
+
   return (
     <Layout>
       <div className="notification-page w-full mb-10">
@@ -19,7 +65,32 @@ const FamilySettings = () => {
           {/* Something Here */}
           {/* <form className="logout-modal-body w-full flex flex-col items-center px-10 py-8 gap-4"></form> */}
           <div className="w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ">
-            <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] flex flex-col justify-between "></div>
+            <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] lg:flex lg:px-10 px-4 justify-between">
+              <div className="content-tab-items lg:w-[230px] w-full mr-2">
+                <ul className="overflow-hidden mb-10 lg:mb-0 py-8">
+                  {tabs.map(({ name, id, title, iconName }) => (
+                    <li
+                      onClick={() => tabHandler(name)}
+                      key={id}
+                      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+                        tab === name ? "text-purple" : " text-thin-light-gray"
+                      }`}
+                    >
+                      <div>
+                        <Icons name={iconName} />
+                      </div>
+                      <div>
+                        <p className="text-18 tracking-wide">{title}</p>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div class="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
+              <div className="flex-1">
+                <div className="tab-item">{selectedComponent}</div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-- 
2.34.1