Files
Users-Wrench/src/components/FamilyAcc/FamilyManage.jsx
T

61 lines
1.8 KiB
React

import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import Layout from "../Partials/Layout";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import FamilyManageTabs from "./FamilyManageTabs";
export default function FamilyManage() {
const [selectTab, setValue] = useState("today");
let [pageLoading, setPageLoading] = useState(true);
let location = useLocation();
let navigate = useNavigate();
let accountDetails = location?.state;
// tab handler
const filterHandler = (value) => {
setValue(value);
};
useEffect(() => {
if (!accountDetails) {
navigate("/acc-family", { replace: true });
} else {
setPageLoading(false);
}
}, []);
return (
<Layout>
{/*<CommonHead />*/}
{pageLoading ? (
<LoadingSpinner size={8} color="sky-blue" />
) : (
<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={`${selectTab === "today" ? "block" : "hidden"}`}
>
Manage Family
</span>
</h1>
</div>
<div className="slider-btns flex space-x-4">
<div
onClick={() => filterHandler("today")}
className="relative"
></div>
</div>
</div>
<FamilyManageTabs accountDetails={accountDetails} />
</div>
</div>
)}
</Layout>
);
}