zone camera and target updation added

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

@@ -1,62 +1,57 @@
 import React from "react";
 import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
+// import { useThree } from "@react-three/fiber";
 
 interface PositionInputProps {
-  onChange: (value: string) => void; // Callback for value change
+  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 = "number", // Default type
+  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 className="eyedrop-button">
-          <EyeDroperIcon isActive={false} />
-        </div>
+        {header}
       </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}
-            disabled
-          />
-        </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}
-            disabled
-            min={0}
-          />
-        </div>
-        <div className="input-container">
-          <div className="custom-input-label">Z : </div>
-          <input
-            className="custom-input-field"
-            type={type}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={placeholder}
-            disabled
-          />
-        </div>
+        {["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;
+export default Vector3Input;