first commit

app/src/components/ui/ModuleToggle.tsx

@@ -0,0 +1,59 @@
+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;