136 lines
4.6 KiB
React
136 lines
4.6 KiB
React
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();
|
|
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">
|
|
<CustomBreadcrumb
|
|
title={"Family Settings"}
|
|
breadcrumb={[
|
|
{ link: "/", title: "Home" },
|
|
{
|
|
link: "/acc-family",
|
|
title: "Family Account",
|
|
},
|
|
{
|
|
link: "/familysettings",
|
|
title: "Family Settings",
|
|
active: true,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
<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>
|
|
|
|
<span>Family</span>
|
|
</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;
|