first commit

app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
+
+interface PositionInputProps {
+  label?: string; // Optional label for the input
+  onChange: (value: string) => void; // Callback for value change
+  placeholder?: string; // Optional placeholder
+  type?: string; // Input type (e.g., text, number, email)
+  value1?: number;
+  value2?: number;
+  disabled?: boolean; // Optional disabled property
+  isEyedrop?: boolean; // Optional eyedrop property
+  handleEyeDropClick?: () => void; // Optional function for eye drop click
+}
+
+const PositionInput: React.FC<PositionInputProps> = ({
+  onChange,
+  label = "Position", // Default label
+  placeholder = "Enter value", // Default placeholder
+  type = "number", // Default type
+  value1 = "number",
+  value2 = "number",
+  disabled = false, // Default disabled value
+  isEyedrop = false, // Default isEyedrop value
+  handleEyeDropClick = () => {}, // Default function for eye drop click
+}) => {
+  return (
+    <div className="custom-input-container">
+      <div className="header">{label}</div>
+      <div className="inputs-container">
+        <div className="input-container">
+          <div className="custom-input-label">X : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            value={value1}
+            disabled={disabled} // Apply disabled prop
+          />
+        </div>
+        <div className="split"></div>
+        <div className="input-container">
+          <div className="custom-input-label">Y : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            value={value2}
+            disabled={disabled} // Apply disabled prop
+          />
+        </div>
+      </div>
+      {isEyedrop && (
+        <div className="eye-picker-button" onClick={handleEyeDropClick}>
+          <EyeDroperIcon isActive={false} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PositionInput;

app/src/components/layout/sidebarRight/customInput/RotationInput.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+interface RotationInputProps {
+  onChange: (value: string) => void; // Callback for value change
+  placeholder?: string; // Optional placeholder
+  type?: string; // Input type (e.g., text, number, email)
+  value?: number;
+}
+
+const RotationInput: React.FC<RotationInputProps> = ({
+  onChange,
+  placeholder = "Enter value", // Default placeholder
+  type = "number", // Default type
+  value = "number",
+}) => {
+  return (
+    <div className="custom-input-container">
+      <div className="header">Rotation</div>
+      <div className="inputs-container" style={{ display: "block" }}>
+        <div className="input-container">
+          <div className="custom-input-label">Rotate : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            value={value}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RotationInput;

app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
+// import { useThree } from "@react-three/fiber";
+
+interface PositionInputProps {
+  onChange: (value: [number, number, number]) => void; // Callback for value change
+  header: string;
+  placeholder?: string; // Optional placeholder
+  type?: string; // Input type (e.g., text, number, email)
+  value: [number, number, number] | null;
+  disabled?: boolean; // To enable/disable editing
+}
+
+const Vector3Input: React.FC<PositionInputProps> = ({
+  onChange,
+  header,
+  placeholder = "Enter value", // Default placeholder
+  type = "string", // Default type
+  value,
+  disabled = false, // Default to disabled
+}) => {
+
+  const handleChange = (index: number, newValue: string) => {
+    if (!value) return;
+    const updatedValue = [...value] as [number, number, number];
+    updatedValue[index] = parseFloat(newValue) || 0;
+    console.log('updatedValue: ', updatedValue);
+    onChange(updatedValue);
+  };
+
+
+
+  return (
+    <div className="custom-input-container">
+      <div className="header">
+        {header}
+      </div>
+      <div className="inputs-container">
+        {["X", "Y", "Z"].map((axis, i) => (
+          <div className="input-container" key={axis}>
+            <div className="custom-input-label">{axis}:</div>
+            <input
+              className="custom-input-field"
+              type={type}
+              value={value?.[i] !== undefined ? value[i].toFixed(2) : ""}
+              // onChange={(e) => handleChange(i, e.target.value)}
+              placeholder={placeholder}
+              disabled={disabled}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Vector3Input;