import { File } from "@lib/server/prisma" import FileIcon from "@geist-ui/icons/fileText" import CodeIcon from "@geist-ui/icons/fileLambda" import styles from "./file-tree.module.css" import ShiftBy from "@components/shift-by" import { useEffect, useState } from "react" import { codeFileExtensions } from "@lib/constants" import Link from "@components/link" type Item = File & { icon: JSX.Element } const Card = ({ children, className, ...props }: { children: React.ReactNode className?: string } & React.ComponentProps<"div">) => (
{children}
) const FileTree = ({ files }: { files: File[] }) => { const [items, setItems] = useState([]) 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]) // a list of files with an icon and a title return (

Files

    {items.map(({ id, title, icon }) => (
  • {icon} {title}
  • ))}
) } export default FileTree