add functional context menu

app/components/FilesEditor/ContextMenu/container.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react";
+import { useRef } from "react";
+import useOnclickOutside from "@/hooks/useOnClickOutside";
+
+interface ContextMenuProps {
+  x: number;
+  y: number;
+  closeContextMenu: () => void;
+  file?: any;
+}
+
+const ContextMenuContainer: FC<ContextMenuProps> = ({
+  x,
+  y,
+  closeContextMenu,
+  file,
+}) => {
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+  useOnclickOutside(contextMenuRef, closeContextMenu);
+
+  return (
+    <>
+      <div
+        ref={contextMenuRef}
+        onClick={closeContextMenu}
+        className="bg-primary text-white p-2 rounded-md cursor-pointer"
+        style={{ position: "absolute", top: y, left: x }}
+      >
+        <div
+          onClick={() => {
+            console.log("Option ", file?.attributes.name);
+          }}
+        >
+          {file?.attributes.name}
+        </div>
+        <div>Option 2</div>
+        <div>Option 3</div>
+      </div>
+    </>
+  );
+};
+
+export default ContextMenuContainer;