import { Icon } from "@chakra-ui/icon"; import { useColorModeValue, VStack, HStack, Tooltip, Menu, MenuButton, Button, MenuList, MenuItem, Text, } from "@chakra-ui/react"; import { FileIcon, FolderIcon, JupyterIcon, PythonIcon, ThreeDotsVerticalIcon, TrashCanIcon, } from "../../../../assets/icons"; import { ThreadNotebookFile } from "../../../../types/file.types"; import { getFileName } from "../../../../utils/utils"; import { useRouter } from "next/router"; import { useNotebookStore } from "../../../notebook/store/NotebookStore"; import { useFileViewModalState } from "../../../modals/file-view/FileViewModalStore"; export const FileRow = ({ file, deleteItem, }: { file: ThreadNotebookFile; deleteItem: (file: ThreadNotebookFile) => Promise; }) => { const router = useRouter(); const { navigateToPath } = useNotebookStore.getState(); const selectedFileBgColor = useColorModeValue("orange.100", "orange.800"); const fileName = getFileName(file); const fileSelected = fileName == router.query.path; const fetchIcon = (file: ThreadNotebookFile) => { if (file.type === "directory") { return ; } else if (file.type === "notebook") { return ; } return ; }; const onClick = () => { if (file.type == "notebook") { router.push({ pathname: router.pathname, query: { ...router.query, path: file.path, }, }); } else if (file.type == "directory") { navigateToPath(file.path); } else { useFileViewModalState.getState().setFile(file); } }; return ( {fetchIcon(file)} {fileName} ); }; const MoreOptionsMenu = ({ file, deleteItem, }: { file: ThreadNotebookFile; deleteItem: (file: ThreadNotebookFile) => void; }) => { return ( e.stopPropagation()} > { event.stopPropagation(); deleteItem(file); }} icon={} color="red" > Delete ); };