first commit

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

@@ -0,0 +1,59 @@
+import React, { useState, useRef } from "react";
+
+interface RenameInputProps {
+  value: string;
+  onRename?: (newText: string) => void;
+}
+
+const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [text, setText] = useState(value);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleDoubleClick = () => {
+    setIsEditing(true);
+    setTimeout(() => inputRef.current?.focus(), 0); // Focus the input after rendering
+  };
+
+  const handleBlur = () => {
+    setIsEditing(false);
+    if (onRename) {
+      onRename(text);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setText(e.target.value);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      setIsEditing(false);
+      if (onRename) {
+        onRename(text);
+      }
+    }
+  };
+
+  return (
+    <>
+      {isEditing ? (
+        <input
+          ref={inputRef}
+          type="text"
+          value={text}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          className="rename-input"
+        />
+      ) : (
+        <span onDoubleClick={handleDoubleClick} className="input-value">
+          {text}
+        </span>
+      )}
+    </>
+  );
+};
+
+export default RenameInput;