42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
|
import { CurrentUserFile } from '../../types/file.ts'
|
||
|
|
import styles from './style.module.scss'
|
||
|
|
import { Button } from '@mui/material'
|
||
|
|
|
||
|
|
interface FileListProps {
|
||
|
|
files: CurrentUserFile[]
|
||
|
|
currentFile: CurrentUserFile
|
||
|
|
setCurrentFile: (file: CurrentUserFile) => void
|
||
|
|
handleDownload: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
const FileList = ({
|
||
|
|
files,
|
||
|
|
currentFile,
|
||
|
|
setCurrentFile,
|
||
|
|
handleDownload
|
||
|
|
}: FileListProps) => {
|
||
|
|
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
|
||
|
|
return (
|
||
|
|
<div className={styles.container}>
|
||
|
|
<div className={styles.files}></div>
|
||
|
|
<ul>
|
||
|
|
{files.map((file: CurrentUserFile) => (
|
||
|
|
<li
|
||
|
|
key={file.id}
|
||
|
|
className={`${styles.fileItem} ${isActive(file) && styles.active}`}
|
||
|
|
onClick={() => setCurrentFile(file)}
|
||
|
|
>
|
||
|
|
<span className={styles.fileNumber}>{file.id}</span>
|
||
|
|
<span className={styles.fileName}>{file.filename}</span>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
<Button variant="contained" fullWidth onClick={handleDownload}>
|
||
|
|
Download Files
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default FileList
|