diff --git a/app/components/FilesEditor/MenuContext/index.tsx b/app/components/FilesEditor/MenuContext/index.tsx new file mode 100644 index 0000000..569de85 --- /dev/null +++ b/app/components/FilesEditor/MenuContext/index.tsx @@ -0,0 +1,34 @@ +import { useState } from "react"; + +interface ContextMenuProps { + items: string[]; + onSelect: (item: string) => void; +} + +const ContextMenu: React.FC = ({ items, onSelect }) => { + return ( +
+ +
+ ); +}; + +export default ContextMenu; diff --git a/app/components/FilesEditor/RowFile/index.tsx b/app/components/FilesEditor/RowFile/index.tsx deleted file mode 100644 index 3c6c2d9..0000000 --- a/app/components/FilesEditor/RowFile/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const index = () => { - return <>; -}; - -export default index; diff --git a/app/components/FilesEditor/index.tsx b/app/components/FilesEditor/index.tsx index 7594c93..23d73e5 100644 --- a/app/components/FilesEditor/index.tsx +++ b/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(null); + + const handleButtonClick = (event: React.MouseEvent) => { + 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) => (
@@ -76,12 +79,16 @@ const Index = () => {
{file.attributes.name}
- {file.attributes.is_file ? file.attributes.size : ""} + {file.attributes.is_file ? file.attributes.size + " bytes" : ""}
{formateDate(file.attributes.modified_at)}
-
+