first commit

app/src/components/layout/sidebarRight/simulation/Simulations.tsx

@@ -0,0 +1,147 @@
+import React, { useRef, useState } from "react";
+import {
+  AddIcon,
+  ArrowIcon,
+  RemoveIcon,
+  ResizeHeightIcon,
+} from "../../../icons/ExportCommonIcons";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import { handleResize } from "../../../../functions/handleResizePannel";
+
+interface Path {
+  pathName: string; // Represents the name of the path
+  Children: string[]; // Represents the list of child points
+}
+
+interface DropListProps {
+  val: Path; // Use the Path interface for the val prop
+}
+
+const DropList: React.FC<DropListProps> = ({ val }) => {
+  const [openDrop, setOpenDrop] = useState(false);
+  return (
+    <div className="process-container">
+      <div
+        className="value"
+        onClick={() => {
+          setOpenDrop(!openDrop);
+        }}
+      >
+        {val.pathName}
+        <div className="arrow-container">
+          <ArrowIcon />
+        </div>
+      </div>
+      {val.Children && openDrop && (
+        <div className="children-drop">
+          {val.Children.map((child, index) => (
+            <div key={index} className="value">
+              {child}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Simulations: React.FC = () => {
+  const productsContainerRef = useRef<HTMLDivElement>(null);
+  const [productsList, setProductsList] = useState<string[]>([]);
+  const [selectedItem, setSelectedItem] = useState<string>();
+
+  const handleAddAction = () => {
+    setProductsList([...productsList, `Product ${productsList.length + 1}`]);
+  };
+
+  const handleRemoveAction = (index: number) => {
+    setProductsList(productsList.filter((_, i) => i !== index));
+    if (selectedItem === productsList[index]) {
+      setSelectedItem("");
+    }
+  };
+
+  const Value = [
+    { pathName: "Path 1", Children: ["Point 1", "Point 2"] },
+    { pathName: "Path 2", Children: ["Point 1", "Point 2"] },
+    { pathName: "Path 3", Children: ["Point 1", "Point 2"] },
+  ];
+
+  return (
+    <div className="simulations-container">
+      <div className="header">Simulations</div>
+      <div className="add-product-container">
+        <div className="actions">
+          <div className="header">
+            <div className="header-value">Products</div>
+            <div className="add-button" onClick={handleAddAction}>
+              <AddIcon /> Add
+            </div>
+          </div>
+          <div
+            className="lists-main-container"
+            ref={productsContainerRef}
+            style={{ height: "120px" }}
+          >
+            <div className="list-container">
+              {productsList.map((action, index) => (
+                <div
+                  key={index}
+                  className={`list-item ${
+                    selectedItem === action ? "active" : ""
+                  }`}
+                >
+                  <div
+                    className="value"
+                    onClick={() => setSelectedItem(action)}
+                  >
+                    <input type="radio" name="products" id="products" />
+                    <RenameInput value={action} />
+                  </div>
+                  <div
+                    className="remove-button"
+                    onClick={() => handleRemoveAction(index)}
+                  >
+                    <RemoveIcon />
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div
+              className="resize-icon"
+              id="action-resize"
+              onMouseDown={(e) => handleResize(e, productsContainerRef)}
+            >
+              <ResizeHeightIcon />
+            </div>
+          </div>
+        </div>
+        <div className="simulation-process">
+          <div className="collapse-header-container">
+            <div className="header">Operations</div>
+            <div className="arrow-container">
+              <ArrowIcon />
+            </div>
+          </div>
+          {Value.map((val) => (
+            <DropList val={val} />
+          ))}
+        </div>
+        <div className="compare-simulations-container">
+          <div className="compare-simulations-header">
+            Need to Compare Layout?
+          </div>
+          <div className="content">
+            Click <span>'Compare'</span> to review and analyze the layout
+            differences between them.
+          </div>
+          <div className="input">
+            <input type="button" value={"Compare"} className="submit" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Simulations;