victorAnumudu
108 lines
3.8 KiB
React
108 lines
3.8 KiB
React
import React, { useEffect, useState } from "react";
|
|
import { Link, useLocation } from "react-router-dom";
|
|
import Icons from "../../Helpers/Icons";
|
|
import Layout from "../../Partials/Layout";
|
|
import { AddFamily, FamilyBanner, Relatives } from "./Tabs";
|
|
|
|
const FamilySettings = () => {
|
|
let {state} = useLocation()
|
|
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: <AddFamily />,
|
|
relatives: <Relatives />,
|
|
family_banner: <FamilyBanner imageServer={state.imageServer} />,
|
|
};
|
|
|
|
const defaultTabComponent = Array(tabComponents)[0].add_family;
|
|
|
|
const selectedComponent = tabComponents[tab] || defaultTabComponent;
|
|
|
|
return (
|
|
<Layout>
|
|
<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="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>
|
|
</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" />
|
|
</svg>
|
|
Family
|
|
</Link>
|
|
</div>
|
|
|
|
<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] 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 className="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>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default FamilySettings;
|