feat: Add Trigger component and integrate it into EventProperties; refactor PickAndPlaceAction for improved structure

app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx

@@ -18,6 +18,7 @@ import TravelAction from "./actions/TravelAction";
 import PickAndPlaceAction from "./actions/PickAndPlaceAction";
 import ProcessAction from "./actions/ProcessAction";
 import StorageAction from "./actions/StorageAction";
+import Trigger from "./trigger/Trigger";
 
 interface EventPropertiesProps {
   assetType: string;
@@ -194,11 +195,14 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
           {activeOption === "swap" && <SwapAction />} {/* done */}
           {activeOption === "despawn" && <DespawnAction />} {/* done */}
           {activeOption === "travel" && <TravelAction />} {/* done */}
-          {activeOption === "pickAndPlace" && <PickAndPlaceAction />}
+          {activeOption === "pickAndPlace" && <PickAndPlaceAction />} {/* done */}
           {activeOption === "process" && <ProcessAction />} {/* done */}
           {activeOption === "store" && <StorageAction />} {/* done */}
         </div>
       </div>
+      <div className="tirgger">
+        <Trigger />
+      </div>
     </div>
   );
 };

app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
+import React from "react";
+import EyeDropInput from "../../../../../ui/inputs/EyeDropInput";
 
-const PickAndPlaceAction:React.FC = () => {
+const PickAndPlaceAction: React.FC = () => {
   return (
-    <div>PickAndPlaceAction</div>
+    <>
-  )
+      <EyeDropInput label="Pick Point" value="na" onChange={() => {}} />
-}
+      <EyeDropInput label="Unload Point" value="na" onChange={() => {}} />
+    </>
+  );
+};
 
-export default PickAndPlaceAction
+export default PickAndPlaceAction;

app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx

@@ -1,9 +1,107 @@
-import React from 'react'
+import React, { useState } from "react";
+import { AddIcon, RemoveIcon } from "../../../../../icons/ExportCommonIcons";
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
+
+const Trigger: React.FC = () => {
+  // State to hold the list of triggers
+  const [triggers, setTriggers] = useState<string[]>([]);
+  const [activeOption, setActiveOption] = useState("onComplete");
+
+  // States for dropdowns
+  const [triggeredModel, setTriggeredModel] = useState<string[]>([]);
+  const [triggeredPoint, setTriggeredPoint] = useState<string[]>([]);
+  const [triggeredAction, setTriggeredAction] = useState<string[]>([]);
+
+  // Function to handle adding a new trigger
+  const addTrigger = (): void => {
+    const newTrigger = `Trigger ${triggers.length + 1}`;
+    setTriggers([...triggers, newTrigger]); // Add new trigger to the state
+
+    // Initialize the states for the new trigger
+    setTriggeredModel([...triggeredModel, ""]);
+    setTriggeredPoint([...triggeredPoint, ""]);
+    setTriggeredAction([...triggeredAction, ""]);
+  };
+
+  // Function to handle removing a trigger
+  const removeTrigger = (index: number): void => {
+    setTriggers(triggers.filter((_, i) => i !== index)); // Remove trigger by index
+    setTriggeredModel(triggeredModel.filter((_, i) => i !== index));
+    setTriggeredPoint(triggeredPoint.filter((_, i) => i !== index));
+    setTriggeredAction(triggeredAction.filter((_, i) => i !== index));
+  };
 
-const Trigger = () => {
   return (
-    <div>Trigger</div>
+    <div className="trigger-wrapper">
-  )
+      <div className="header">
-}
+        <div className="title">Trigger</div>
+        <div
+          className="add-button"
+          onClick={addTrigger}
+          style={{ cursor: "pointer" }}
+        >
+          <AddIcon /> Add
+        </div>
+      </div>
+      <div className="trigger-list">
+        {/* Map over triggers and render them */}
+        {triggers.map((trigger, index) => (
+          <div key={index} className="trigger-item">
+            <div className="trigger-name">
+              {trigger}
+              <div
+                className="remove-button"
+                onClick={() => removeTrigger(index)}
+                style={{ cursor: "pointer" }}
+              >
+                <RemoveIcon />
+              </div>
+            </div>
+            <LabledDropdown
+              defaultOption={activeOption}
+              options={["onComplete", "onStart", "onStop", "delay"]}
+              onSelect={(option) => setActiveOption(option)}
+            />
+            <div className="trigger-options">
+              <div>
+                <LabledDropdown
+                  defaultOption={triggeredModel[index] || "Select Model"}
+                  options={["Model 1", "Model 2", "Model 3"]}
+                  onSelect={(option) => {
+                    const newModel = [...triggeredModel];
+                    newModel[index] = option;
+                    setTriggeredModel(newModel);
+                  }}
+                />
+              </div>
+              <div>
+                <LabledDropdown
+                  defaultOption={triggeredPoint[index] || "Select Point"}
+                  options={["Point 1", "Point 2", "Point 3"]}
+                  onSelect={(option) => {
+                    const newPoint = [...triggeredPoint];
+                    newPoint[index] = option;
+                    setTriggeredPoint(newPoint);
+                  }}
+                />
+              </div>
+              <div>
+                <LabledDropdown
+                  defaultOption={triggeredAction[index] || "Select Action"}
+                  options={["Action 1", "Action 2", "Action 3"]}
+                  onSelect={(option) => {
+                    const newAction = [...triggeredAction];
+                    newAction[index] = option;
+                    setTriggeredAction(newAction);
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
 
-export default Trigger
+export default Trigger;