first commit

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

@@ -0,0 +1,41 @@
+import React from "react";
+
+interface PositionInputProps {
+  onChange: (value: string) => void; // Callback for value change
+  placeholder?: string; // Optional placeholder
+  type?: string; // Input type (e.g., text, number, email)
+}
+
+const PositionInput: React.FC<PositionInputProps> = ({
+  onChange,
+  placeholder = "Enter value", // Default placeholder
+  type = "number", // Default type
+}) => {
+  return (
+    <div className="custom-input-container">
+      <div className="header">Position</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}
+          />
+        </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}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PositionInput;

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

@@ -0,0 +1,32 @@
+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)
+}
+
+const RotationInput: React.FC<RotationInputProps> = ({
+  onChange,
+  placeholder = "Enter value", // Default placeholder
+  type = "number", // Default type
+}) => {
+  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}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RotationInput;