git templates updated

2025-03-19 09:13:23 +05:30
parent cdf8dbbdba
commit 124e435504
39 changed files with 1650 additions and 73 deletions
--- a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx
@@ -0,0 +1,176 @@
+import React, { useState } from "react";
+import {
+  AddIcon,
+  InfoIcon,
+  RemoveIcon,
+  ResizeHeightIcon,
+} from "../../../icons/ExportCommonIcons";
+
+const MachineMechanics: React.FC = () => {
+  const [actionList, setActionList] = useState<string[]>([]);
+  const [triggerList, setTriggerList] = useState<string[]>([]);
+  const [selectedItem, setSelectedItem] = useState<{
+    type: "action" | "trigger";
+    name: string;
+  } | null>(null);
+  const [editedName, setEditedName] = useState<string>("");
+
+  const handleAddAction = () => {
+    setActionList([...actionList, `Action ${actionList.length + 1}`]);
+  };
+
+  const handleAddTrigger = () => {
+    setTriggerList([...triggerList, `Trigger ${triggerList.length + 1}`]);
+  };
+
+  const handleRemoveAction = (index: number) => {
+    setActionList(actionList.filter((_, i) => i !== index));
+    if (
+      selectedItem?.type === "action" &&
+      selectedItem.name === actionList[index]
+    ) {
+      setSelectedItem(null);
+      setEditedName("");
+    }
+  };
+
+  const handleRemoveTrigger = (index: number) => {
+    setTriggerList(triggerList.filter((_, i) => i !== index));
+    if (
+      selectedItem?.type === "trigger" &&
+      selectedItem.name === triggerList[index]
+    ) {
+      setSelectedItem(null);
+      setEditedName("");
+    }
+  };
+
+  const handleSelectItem = (type: "action" | "trigger", name: string) => {
+    setSelectedItem({ type, name });
+    setEditedName(name);
+  };
+
+  const handleSave = () => {
+    if (!selectedItem) return;
+
+    if (selectedItem.type === "action") {
+      setActionList(
+        actionList.map((action) =>
+          action === selectedItem.name ? editedName : action
+        )
+      );
+    } else if (selectedItem.type === "trigger") {
+      setTriggerList(
+        triggerList.map((trigger) =>
+          trigger === selectedItem.name ? editedName : trigger
+        )
+      );
+    }
+
+    setSelectedItem({ ...selectedItem, name: editedName });
+  };
+
+  return (
+    <div className="machine-mechanics-container">
+      <div className="actions">
+        <div className="header">
+          <div className="header-value">Actions</div>
+          <div className="add-button" onClick={handleAddAction}>
+            <AddIcon /> Add
+          </div>
+        </div>
+        <div className="lists-main-container">
+          <div className="list-container">
+            {actionList.map((action, index) => (
+              <div
+                key={index}
+                className={`list-item ${
+                  selectedItem?.type === "action" && selectedItem.name === action
+                    ? "active"
+                    : ""
+                }`}
+              >
+                <div className="value" onClick={() => handleSelectItem("action", action)}>
+                  {action}
+                </div>
+                <div
+                  className="remove-button"
+                  onClick={() => handleRemoveAction(index)}
+                >
+                  <RemoveIcon />
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="resize-icon">
+            <ResizeHeightIcon />
+          </div>
+        </div>
+      </div>
+      <div className="triggers">
+        <div className="header">
+          <div className="header-value">Triggers</div>
+          <div className="add-button" onClick={handleAddTrigger}>
+            <AddIcon /> Add
+          </div>
+        </div>
+        <div className="lists-main-container">
+          <div className="list-container">
+            {triggerList.map((trigger, index) => (
+              <div
+                key={index}
+                className={`list-item ${
+                  selectedItem?.type === "trigger" &&
+                  selectedItem.name === trigger
+                    ? "active"
+                    : ""
+                }`}
+              >
+                <div className="value" onClick={() => handleSelectItem("trigger", trigger)}>
+                  {trigger}
+                </div>
+                <div
+                  className="remove-button"
+                  onClick={() => handleRemoveTrigger(index)}
+                >
+                  <RemoveIcon />
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="resize-icon">
+            <ResizeHeightIcon />
+          </div>
+        </div>
+      </div>
+      <div className="selected-properties-container">
+        {selectedItem && (
+          <>
+            <div>
+              <label>Edit Name:</label>
+              <input
+                type="text"
+                value={editedName}
+                onChange={(e) => setEditedName(e.target.value)}
+              />
+            </div>
+            {/* Add other Properties Like:
+             * Object Selection Dropdown
+             * Buffer Time
+             * Get Value From Object
+             * Action
+             * etc.
+             */}
+            <div onClick={handleSave}>Update</div> {/* remove this */}
+          </>
+        )}
+      </div>
+      <div className="footer">
+        <InfoIcon />
+        By Selecting Path, you can create Object Triggers.
+      </div>
+    </div>
+  );
+};
+
+export default MachineMechanics;