60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
|
import React from "react";
|
||
|
|
import useModuleStore from "../../store/useModuleStore";
|
||
|
|
import {
|
||
|
|
BuilderIcon,
|
||
|
|
CartIcon,
|
||
|
|
SimulationIcon,
|
||
|
|
VisualizationIcon,
|
||
|
|
} from "../icons/ExportModuleIcons";
|
||
|
|
|
||
|
|
const ModuleToggle: React.FC = () => {
|
||
|
|
const { activeModule, setActiveModule } = useModuleStore();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="module-toggle-container">
|
||
|
|
<div
|
||
|
|
className={`module-list ${activeModule === "builder" && "active"}`}
|
||
|
|
onClick={() => setActiveModule("builder")}
|
||
|
|
>
|
||
|
|
<div className="icon">
|
||
|
|
<BuilderIcon isActive={activeModule === "builder"} />
|
||
|
|
</div>
|
||
|
|
<div className="module">Builder</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className={`module-list ${activeModule === "simulation" && "active"}`}
|
||
|
|
onClick={() => setActiveModule("simulation")}
|
||
|
|
>
|
||
|
|
<div className="icon">
|
||
|
|
<SimulationIcon isActive={activeModule === "simulation"} />
|
||
|
|
</div>
|
||
|
|
<div className="module">Simulation</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className={`module-list ${
|
||
|
|
activeModule === "visualization" && "active"
|
||
|
|
}`}
|
||
|
|
onClick={() => setActiveModule("visualization")}
|
||
|
|
>
|
||
|
|
<div className="icon">
|
||
|
|
<VisualizationIcon isActive={activeModule === "visualization"} />
|
||
|
|
</div>
|
||
|
|
<div className="module">Visualization</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className={`module-list ${
|
||
|
|
activeModule === "market" && "active"
|
||
|
|
}`}
|
||
|
|
onClick={() => setActiveModule("market")}
|
||
|
|
>
|
||
|
|
<div className="icon">
|
||
|
|
<CartIcon isActive={activeModule === "market"} />
|
||
|
|
</div>
|
||
|
|
<div className="module">Market Place</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ModuleToggle;
|