73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import useModuleStore from "../../store/useModuleStore";
|
|
import {
|
|
BuilderIcon,
|
|
CartIcon,
|
|
SimulationIcon,
|
|
VisualizationIcon,
|
|
} from "../icons/ExportModuleIcons";
|
|
import useToggleStore from "../../store/useUIToggleStore";
|
|
import { useSelectedZoneStore } from "../../store/useZoneStore";
|
|
|
|
const ModuleToggle: React.FC = () => {
|
|
const { activeModule, setActiveModule } = useModuleStore();
|
|
const { setToggleUI } = useToggleStore();
|
|
|
|
|
|
return (
|
|
<div className="module-toggle-container">
|
|
<div
|
|
className={`module-list ${activeModule === "builder" && "active"}`}
|
|
onClick={() => {
|
|
setActiveModule("builder");
|
|
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
|
|
}}
|
|
>
|
|
<div className="icon">
|
|
<BuilderIcon isActive={activeModule === "builder"} />
|
|
</div>
|
|
<div className="module">Builder</div>
|
|
</div>
|
|
<div
|
|
className={`module-list ${activeModule === "simulation" && "active"}`}
|
|
onClick={() => {
|
|
setActiveModule("simulation");
|
|
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
|
|
}}
|
|
>
|
|
<div className="icon">
|
|
<SimulationIcon isActive={activeModule === "simulation"} />
|
|
</div>
|
|
<div className="module">Simulation</div>
|
|
</div>
|
|
<div
|
|
className={`module-list ${activeModule === "visualization" && "active"
|
|
}`}
|
|
onClick={() => {
|
|
setActiveModule("visualization");
|
|
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
|
|
}}
|
|
>
|
|
<div className="icon">
|
|
<VisualizationIcon isActive={activeModule === "visualization"} />
|
|
</div>
|
|
<div className="module">Visualization</div>
|
|
</div>
|
|
<div
|
|
className={`module-list ${activeModule === "market" && "active"}`}
|
|
onClick={() => {
|
|
setActiveModule("market");
|
|
setToggleUI(false);
|
|
}}
|
|
>
|
|
<div className="icon">
|
|
<CartIcon isActive={activeModule === "market"} />
|
|
</div>
|
|
<div className="module">Market Place</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ModuleToggle;
|