76 lines
2.2 KiB
JavaScript
76 lines
2.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import { ComingSoonPage } from "../../pages/Misc/ComingSoonPage";
|
|
import ProjectPermission from "./ProjectPermission";
|
|
|
|
const ProjectSetting = () => {
|
|
const [activePill, setActivePill] = useState("Permissions")
|
|
// const [activePill, setActivePill] = useState(() => {
|
|
// return localStorage.getItem("lastActiveProjectSettingTab") || "Permissions";
|
|
// });
|
|
const projectSettingTab = [
|
|
{ key: "Permissions", label: "Permissions" },
|
|
{ key: "Notification", label: "Notification" },
|
|
{ key: "SeparatedLink", label: "Separated link", isButton: true },
|
|
];
|
|
const handlePillClick = (pillKey) => {
|
|
setActivePill(pillKey);
|
|
localStorage.setItem("lastActiveProjectSettingTab", pillKey);
|
|
};
|
|
|
|
const renderContent = () => {
|
|
switch (activePill) {
|
|
case "Permissions":
|
|
return <ProjectPermission />;
|
|
|
|
case "Notification":
|
|
return <ComingSoonPage />;
|
|
|
|
default:
|
|
return <ComingSoonPage />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-100">
|
|
<div className="card py-2 px-5">
|
|
{/* <div className="col-12">
|
|
<div className="dropdown text-end">
|
|
<button
|
|
className="btn btn-sm btn-outline-primary dropdown-toggle"
|
|
type="button"
|
|
id="dropdownMenuButton"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
{activePill || "Select Option"}
|
|
</button>
|
|
|
|
<ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
{projectSettingTab.map((item) =>
|
|
item.isButton ? (
|
|
<li key={item.key}>
|
|
<button className="dropdown-item">{item.label}</button>
|
|
</li>
|
|
) : (
|
|
<li key={item.key}>
|
|
<button
|
|
className="dropdown-item"
|
|
onClick={() => handlePillClick(item.key)}
|
|
>
|
|
{item.label}
|
|
</button>
|
|
</li>
|
|
)
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</div> */}
|
|
|
|
<div className="mt-3">{renderContent()}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectSetting;
|