feat: Implement event properties management with action handling and UI components

app/src/components/ui/inputs/InputWithDropDown.tsx

@@ -5,6 +5,7 @@ type InputWithDropDownProps = {
   label: string;
   value: string;
   min?: number;
+  max?: number;
   step?: number;
   defaultValue?: string;
   options?: string[]; // Array of dropdown options
@@ -19,6 +20,7 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
   label,
   value,
   min,
+  max,
   step,
   defaultValue,
   options,
@@ -47,6 +49,7 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
       <div className="input default" id={separatedWords}>
         <input
           min={min}
+          max={max}
           step={step}
           type="number"
           defaultValue={value}

app/src/components/ui/inputs/PreviewSelectionWithUpload.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import LabledDropdown from "./LabledDropdown";
+import { ArrowIcon } from "../../icons/ExportCommonIcons";
+
+const PreviewSelectionWithUpload: React.FC = () => {
+  const [showPreview, setSetshowPreview] = useState(false);
+  return (
+    <div className="preview-selection-with-upload-wrapper">
+      <div
+        className="input-header-container"
+        onClick={() => setSetshowPreview(!showPreview)}
+      >
+        <div className="input-header">Preview</div>
+        <div
+          className="arrow-container"
+          style={{ rotate: showPreview ? "0deg" : "90deg" }}
+        >
+          <ArrowIcon />
+        </div>
+      </div>
+      {showPreview && (
+        <div className="canvas-wrapper">
+          <div className="canvas-container"></div>
+        </div>
+      )}
+      <div className="asset-selection-container">
+        <div className="upload-custom-asset-button">
+          <div className="title">Upload Product</div>
+          <input
+            type="file"
+            accept=".glb, .gltf"
+            id="simulation-product-upload"
+          />
+          <label className="upload-button" htmlFor="simulation-product-upload">
+            Upload here
+          </label>
+        </div>
+        <LabledDropdown
+          label="Presets"
+          defaultOption={"Default material"}
+          options={["Default material", "Product 1", "Product 2"]}
+          onSelect={(option) => console.log(option)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PreviewSelectionWithUpload;