feat: Add context menu component for file editor

app/components/FilesEditor/index.tsx

@@ -1,15 +1,35 @@
 "use client";
 
 import { formatDistanceToNow } from "date-fns";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import DocumentIcon from "@/components/Icons/Document";
 import FolderIcon from "@/components/Icons/Folder";
 import MenuIcon from "@/components/Icons/Menu";
+import MenuContext from "@/components/FilesEditor/MenuContext";
 
 const Index = () => {
   const [apiKey, setApiKey] = useState("");
   const [fileList, setFileList] = useState([]);
 
+  const [menuVisible, setMenuVisible] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault(); // zapobiega domyślnemu działaniu
+    const rect = buttonRef.current?.getBoundingClientRect();
+    setMenuPosition({
+      x: rect?.left || 0,
+      y: (rect?.bottom || 0) + window.scrollY,
+    });
+    setMenuVisible(true);
+  };
+
+  const handleSelect = (item: string) => {
+    console.log(`Wybrano: ${item}`);
+    setMenuVisible(false);
+  };
+
   const setCredentials = async () => {
     setApiKey("ptlc_aDGU4VHNQuN5t6dyxNzVon3UZLR5ehuySmdR7xsUbMm");
   };
@@ -19,24 +39,6 @@ const Index = () => {
     return formatDistanceToNow(date, { addSuffix: true });
   };
 
-  const sortFiles = (files: any) => {
-    const data = files;
-
-    const sortedData = data.sort((a, b) => {
-      const isADir = !a.attributes.is_file;
-      const isBDir = !b.attributes.is_file;
-
-      // Najpierw katalogi, potem pliki
-      if (isADir && !isBDir) return -1;
-      if (!isADir && isBDir) return 1;
-
-      // Sortowanie alfabetyczne
-      return a.attributes.name.localeCompare(b.attributes.name);
-    });
-
-    console.log(sortedData);
-  };
-
   const fetchFiles = async (apiKey: string) => {
     try {
       const response = await fetch(
@@ -68,6 +70,7 @@ const Index = () => {
     <>
       {fileList.map((file) => (
         <div
+          isFile={file.attributes.is_file}
           className="flex justify-between gap-4 bg-slate-400 mb-1 hover:bg-slate-500 pl-4 pr-4 pt-1 pb-1 rounded-md"
           key={file.attributes.name}
         >
@@ -76,12 +79,16 @@ const Index = () => {
           </div>
           <div className="w-48 text-left">{file.attributes.name}</div>
           <div className="w-48 text-right">
-            {file.attributes.is_file ? file.attributes.size : ""}
+            {file.attributes.is_file ? file.attributes.size + " bytes" : ""}
           </div>
           <div title={file.attributes.modified_at} className="w-60 text-right">
             {formateDate(file.attributes.modified_at)}
           </div>
-          <div className="w-6 justify-center text-center justify-items-center">
+          <div
+            ref={buttonRef}
+            onClick={handleButtonClick}
+            className="w-6 justify-center text-center justify-items-center"
+          >
             <MenuIcon />
           </div>
         </div>