53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { CurrentUserFile } from '../../types/file.ts'
|
|
import styles from './style.module.scss'
|
|
import { Button } from '@mui/material'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faCheck } from '@fortawesome/free-solid-svg-icons'
|
|
|
|
interface FileListProps {
|
|
files: CurrentUserFile[]
|
|
currentFile: CurrentUserFile
|
|
setCurrentFile: (file: CurrentUserFile) => void
|
|
handleDownload: () => void
|
|
downloadLabel?: string
|
|
}
|
|
|
|
const FileList = ({
|
|
files,
|
|
currentFile,
|
|
setCurrentFile,
|
|
handleDownload,
|
|
downloadLabel
|
|
}: FileListProps) => {
|
|
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
|
|
return (
|
|
<div className={styles.wrap}>
|
|
<div className={styles.container}>
|
|
<ul className={styles.files}>
|
|
{files.map((file: CurrentUserFile) => (
|
|
<li
|
|
key={file.id}
|
|
className={`${styles.fileItem} ${isActive(file) && styles.active}`}
|
|
onClick={() => setCurrentFile(file)}
|
|
>
|
|
<div className={styles.fileNumber}>{file.id}</div>
|
|
<div className={styles.fileInfo}>
|
|
<div className={styles.fileName}>{file.filename}</div>
|
|
</div>
|
|
|
|
<div className={styles.fileVisual}>
|
|
{file.isHashValid && <FontAwesomeIcon icon={faCheck} />}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<Button variant="contained" fullWidth onClick={handleDownload}>
|
|
{downloadLabel ? downloadLabel : 'Download Files'}
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FileList
|