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 React, { useRef, useState } from "react";
-import { AddIcon, RemoveIcon } from "../../../../../icons/ExportCommonIcons";
+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,19 +52,44 @@ const Trigger: React.FC = () => {
         </button>
       </div>
       <div className="trigger-list">
-        {/* Map over triggers and render them */}
+        <div
-        {triggers.map((trigger, index) => (
+          className="lists-main-container"
-          <div key={index.toFixed()} className="trigger-item">
+          ref={triggersContainerRef}
-            <div className="trigger-name">
+          style={{ height: "120px" }}
-              {trigger}
+        >
+          <div className="list-container">
+            {triggers.map((trigger: any, index: number) => (
+              <div
+                key={index}
+                className={`list-item ${
+                  selectedTrigger === trigger ? "active" : ""
+                }`}
+                onClick={() => setSelectedTrigger(trigger)}
+              >
+                <button className="value" onClick={() => {}}>
+                  <RenameInput value={trigger} onRename={() => {}} />
+                </button>
+                {triggers.length > 1 && (
                   <button
                     className="remove-button"
                     onClick={() => removeTrigger(index)}
-                style={{ cursor: "pointer" }}
                   >
                     <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"]}
@@ -65,40 +98,39 @@ const Trigger: React.FC = () => {
           <div className="trigger-options">
             <div>
               <LabledDropdown
-                  defaultOption={triggeredModel[index] || "Select Model"}
+                defaultOption={triggeredModel[0] || "Select Model"}
                 options={["Model 1", "Model 2", "Model 3"]}
                 onSelect={(option) => {
                   const newModel = [...triggeredModel];
-                    newModel[index] = option;
+                  newModel[0] = option;
                   setTriggeredModel(newModel);
                 }}
               />
             </div>
             <div>
               <LabledDropdown
-                  defaultOption={triggeredPoint[index] || "Select Point"}
+                defaultOption={triggeredPoint[0] || "Select Point"}
                 options={["Point 1", "Point 2", "Point 3"]}
                 onSelect={(option) => {
                   const newPoint = [...triggeredPoint];
-                    newPoint[index] = option;
+                  newPoint[0] = option;
                   setTriggeredPoint(newPoint);
                 }}
               />
             </div>
             <div>
               <LabledDropdown
-                  defaultOption={triggeredAction[index] || "Select Action"}
+                defaultOption={triggeredAction[0] || "Select Action"}
                 options={["Action 1", "Action 2", "Action 3"]}
                 onSelect={(option) => {
                   const newAction = [...triggeredAction];
-                    newAction[index] = option;
+                  newAction[0] = option;
                   setTriggeredAction(newAction);
                 }}
               />
             </div>
           </div>
         </div>
-        ))}
       </div>
     </div>
   );