sigit.io/src/components/FileList/index.tsx

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.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)}
            >
              <span className={styles.fileNumber}>{file.id}</span>
              <span className={styles.fileName}>{file.filename}</span>
            </li>
          ))}
        </ul>
      </div>
      <Button variant="contained" fullWidth onClick={handleDownload}>
        Download Files
      </Button>
    </div>
  )
}

export default FileList