refactor: Improve context menu functionality and add rename feature

app/components/FilesEditor/ContextMenu/rename.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+interface Props {
+  closeRemapFunction: () => void;
+  file: any;
+}
+
+const Rename = (props: Props) => {
+  const { closeRemapFunction, file } = props;
+  const [newName, setNewName] = React.useState(file.attributes.name);
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Escape") {
+      console.log("esc");
+      closeRemapFunction();
+    } else if (event.key === "Enter") {
+      console.log("enter pressed");
+    }
+  };
+
+  const handleRename = (event: React.MouseEvent) => {
+    // console.log("rename");
+    console.log("Renaming file:", file?.attributes.name, "to", newName);
+    console.log(file);
+  };
+
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.focus();
+    }
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      onKeyDown={handleKeyDown}
+      tabIndex={-1} // Dodano tabIndex, aby element był fokusowalny
+      className="fixed inset-0 flex items-center justify-center z-50"
+    >
+      <div className="absolute inset-0 bg-black bg-opacity-75"></div>
+      <div className="flex bg-secondary p-6 rounded-lg shadow-lg z-10">
+        <input
+          type="text"
+          placeholder="Type here"
+          className="input w-full max-w-xs text-primary"
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+        />
+        <button className="ml-2 btn" onClick={handleRename}>
+          Rename
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Rename;