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" type Item = File & { icon: JSX.Element } const FileDropdown = ({ files, isMobile }: { files: File[] isMobile: boolean }) => { const [expanded, setExpanded] = useState(false) const [items, setItems] = useState([]) const changeHandler = (next: boolean) => { setExpanded(next) } const onOpen = () => setExpanded(true) const onClose = useCallback(() => setExpanded(false), [setExpanded]) 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 = ( ) // a list of files with an icon and a title return ( <> ) } export default FileDropdown