CoastalCommitsPastes/client/app/(posts)/components/file-dropdown/index.tsx

66 lines
1.6 KiB
TypeScript
Raw Normal View History

import Button from "@components/button"
import { Popover } from "@components/popover"
2022-11-12 04:28:06 -05:00
import ShiftBy from "@components/shift-by"
import ChevronDown from "@geist-ui/icons/chevronDown"
2022-04-09 20:48:19 -04:00
import CodeIcon from "@geist-ui/icons/fileFunction"
import FileIcon from "@geist-ui/icons/fileText"
2022-03-25 16:01:46 -04:00
import { codeFileExtensions } from "@lib/constants"
import clsx from "clsx"
2022-11-12 04:28:06 -05:00
import type { File } from "lib/server/prisma"
import styles from "./dropdown.module.css"
import buttonStyles from "@components/button/button.module.css"
2022-03-25 16:01:46 -04:00
type Item = File & {
2022-04-09 20:48:19 -04:00
icon: JSX.Element
2022-03-25 16:01:46 -04:00
}
const FileDropdown = ({ files }: { files: File[] }) => {
const items = files.map((file) => {
const extension = file.title.split(".").pop()
if (codeFileExtensions.includes(extension || "")) {
return {
...file,
icon: <CodeIcon />
}
} else {
return {
...file,
icon: <FileIcon />
2022-04-09 20:48:19 -04:00
}
}
})
2022-03-25 16:01:46 -04:00
const content = (
<ul className={styles.content}>
{items.map((item) => (
<li key={item.id}>
<a href={`#${item.title}`}>
<ShiftBy y={5}>
<span className={styles.fileIcon}>{item.icon}</span>
</ShiftBy>
<span className={styles.fileTitle}>
{item.title ? item.title : "Untitled"}
</span>
</a>
</li>
))}
</ul>
)
2022-03-25 16:01:46 -04:00
2022-04-09 20:48:19 -04:00
return (
<Popover>
<Popover.Trigger className={clsx(buttonStyles.button)}>
<div className={buttonStyles.icon}>
<ChevronDown />
</div>
2022-11-18 01:36:53 -05:00
<span>
Jump to {files.length} {files.length === 1 ? "file" : "files"}
</span>
</Popover.Trigger>
<Popover.Content>{content}</Popover.Content>
</Popover>
2022-04-09 20:48:19 -04:00
)
2022-03-25 16:01:46 -04:00
}
2022-04-09 20:48:19 -04:00
export default FileDropdown