feat: Enhance Trigger component with rename functionality and resize option

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

@@ -1,11 +1,19 @@
-import React, { useState } from "react";
-import { AddIcon, RemoveIcon } from "../../../../../icons/ExportCommonIcons";
+import React, { useRef, useState } from "react";
+import {
+  AddIcon,
+  RemoveIcon,
+  ResizeHeightIcon,
+} from "../../../../../icons/ExportCommonIcons";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
+import RenameInput from "../../../../../ui/inputs/RenameInput";
+import { handleResize } from "../../../../../../functions/handleResizePannel";
 
 const Trigger: React.FC = () => {
   // State to hold the list of triggers
-  const [triggers, setTriggers] = useState<string[]>([]);
+  const [triggers, setTriggers] = useState<string[]>(["Trigger 1"]);
+  const [selectedTrigger, setSelectedTrigger] = useState<string>("Trigger 1");
   const [activeOption, setActiveOption] = useState("onComplete");
+  const triggersContainerRef = useRef<HTMLDivElement>(null);
 
   // States for dropdowns
   const [triggeredModel, setTriggeredModel] = useState<string[]>([]);
@@ -44,61 +52,85 @@ const Trigger: React.FC = () => {
         </button>
       </div>
       <div className="trigger-list">
-        {/* Map over triggers and render them */}
-        {triggers.map((trigger, index) => (
-          <div key={index.toFixed()} className="trigger-item">
-            <div className="trigger-name">
-              {trigger}
-              <button
-                className="remove-button"
-                onClick={() => removeTrigger(index)}
-                style={{ cursor: "pointer" }}
+        <div
+          className="lists-main-container"
+          ref={triggersContainerRef}
+          style={{ height: "120px" }}
+        >
+          <div className="list-container">
+            {triggers.map((trigger: any, index: number) => (
+              <div
+                key={index}
+                className={`list-item ${
+                  selectedTrigger === trigger ? "active" : ""
+                }`}
+                onClick={() => setSelectedTrigger(trigger)}
               >
-                <RemoveIcon />
-              </button>
+                <button className="value" onClick={() => {}}>
+                  <RenameInput value={trigger} onRename={() => {}} />
+                </button>
+                {triggers.length > 1 && (
+                  <button
+                    className="remove-button"
+                    onClick={() => removeTrigger(index)}
+                  >
+                    <RemoveIcon />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+          <button
+            className="resize-icon"
+            id="action-resize"
+            onMouseDown={(e: any) => handleResize(e, triggersContainerRef)}
+          >
+            <ResizeHeightIcon />
+          </button>
+        </div>
+        <div className="trigger-item">
+          <div className="trigger-name">{selectedTrigger}</div>
+          <LabledDropdown
+            defaultOption={activeOption}
+            options={["onComplete", "onStart", "onStop", "delay"]}
+            onSelect={(option) => setActiveOption(option)}
+          />
+          <div className="trigger-options">
+            <div>
+              <LabledDropdown
+                defaultOption={triggeredModel[0] || "Select Model"}
+                options={["Model 1", "Model 2", "Model 3"]}
+                onSelect={(option) => {
+                  const newModel = [...triggeredModel];
+                  newModel[0] = option;
+                  setTriggeredModel(newModel);
+                }}
+              />
             </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>
+              <LabledDropdown
+                defaultOption={triggeredPoint[0] || "Select Point"}
+                options={["Point 1", "Point 2", "Point 3"]}
+                onSelect={(option) => {
+                  const newPoint = [...triggeredPoint];
+                  newPoint[0] = option;
+                  setTriggeredPoint(newPoint);
+                }}
+              />
+            </div>
+            <div>
+              <LabledDropdown
+                defaultOption={triggeredAction[0] || "Select Action"}
+                options={["Action 1", "Action 2", "Action 3"]}
+                onSelect={(option) => {
+                  const newAction = [...triggeredAction];
+                  newAction[0] = option;
+                  setTriggeredAction(newAction);
+                }}
+              />
             </div>
           </div>
-        ))}
+        </div>
       </div>
     </div>
   );