import { Button, Link, Text, Popover } from '@geist-ui/core' import FileIcon from '@geist-ui/icons/fileText' import CodeIcon from '@geist-ui/icons/fileFunction' import styles from './dropdown.module.css' import { useCallback, useEffect, useRef, useState } from "react" import { codeFileExtensions } from "@lib/constants" import ChevronDown from '@geist-ui/icons/chevronDown' import ShiftBy from "@components/shift-by" import type { File } from '@lib/types' import FileTree from '@geist-ui/icons/list' type Item = File & { icon: JSX.Element } const FileDropdown = ({ files }: { files: File[] }) => { const [expanded, setExpanded] = useState(false) const [items, setItems] = useState([]) const onOpen = useCallback(() => { setExpanded(true) }, []) const onClose = useCallback(() => { setExpanded(false) // contentRef.current?.focus() }, []) useEffect(() => { const newItems = files.map(file => { const extension = file.title.split('.').pop() if (codeFileExtensions.includes(extension || '')) { return { ...file, icon: } } else { return { ...file, icon: } } }) setItems(newItems) }, [files]) const content = useCallback(() => ( ), [items, onClose]) // a list of files with an icon and a title return ( ) } export default FileDropdown