refactor: Improve context menu functionality and add rename feature

app/components/FilesEditor/ContextMenu/container.tsx

@@ -1,11 +1,15 @@
-import { FC } from "react";
-import { useRef } from "react";
+import { FC, useRef } from "react";
 import useOnclickOutside from "@/hooks/useOnClickOutside";
+import PencilIcon from "@/components/Icons/Pencil";
+import MoveIcon from "@/components/Icons/Move";
+import LockIcon from "@/components/Icons/Lock";
 
 interface ContextMenuProps {
   x: number;
   y: number;
   closeContextMenu: () => void;
+  renameFunction: () => void;
+  setFile: (file: any) => void;
   file?: any;
 }
 
@@ -13,31 +17,55 @@ const ContextMenuContainer: FC<ContextMenuProps> = ({
   x,
   y,
   closeContextMenu,
+  renameFunction,
+  setFile,
   file,
 }) => {
   const contextMenuRef = useRef<HTMLDivElement>(null);
   useOnclickOutside(contextMenuRef, closeContextMenu);
 
   return (
-    <>
+    <div
+      ref={contextMenuRef}
+      className="bg-secondary text-secondary-content p-2 mx-0 rounded-md cursor-pointer w-80"
+      style={{ position: "absolute", top: y, left: x }}
+    >
       <div
-        ref={contextMenuRef}
-        onClick={closeContextMenu}
-        className="bg-secondary text-secondary-content p-2 rounded-md cursor-pointer"
-        style={{ position: "absolute", top: y, left: x }}
+        className="flex hover:bg-primary-content hover:text-primary"
+        onClick={() => {
+          setFile(file);
+          renameFunction();
+          console.log("Renaming file:", file?.attributes.name);
+        }}
       >
-        <div
-          className="hover:bg-primary-content hover:text-primary"
-          onClick={() => {
-            console.log("Option ", file?.attributes.name);
-          }}
-        >
-          {file?.attributes.name}
+        <div className="mr-2" style={{ transform: "scale(0.77)" }}>
+          <PencilIcon />
         </div>
-        <div>Option 2</div>
-        <div>Option 3</div>
+        Rename
       </div>
-    </>
+      <div
+        className="flex hover:bg-primary-content hover:text-primary"
+        onClick={() => {
+          console.log("Moving file:", file?.attributes.name);
+        }}
+      >
+        <div className="mr-2" style={{ transform: "scale(0.8)" }}>
+          <MoveIcon />
+        </div>
+        Move
+      </div>
+      <div
+        className="flex hover:bg-primary-content hover:text-primary"
+        onClick={() => {
+          console.log("Changing permissions for file:", file?.attributes.name);
+        }}
+      >
+        <div className="mr-2" style={{ transform: "scale(0.8)" }}>
+          <LockIcon />
+        </div>
+        Permissions
+      </div>
+    </div>
   );
 };