64 lines
No EOL
2.2 KiB
TypeScript
64 lines
No EOL
2.2 KiB
TypeScript
import { FaUpload, FaDownload } from 'react-icons/fa';
|
|
import styles from './DashboardPromptSet.module.css';
|
|
import { FileItem } from './FileItem';
|
|
|
|
type File = {
|
|
id: number;
|
|
file_name: string;
|
|
created_at: string;
|
|
};
|
|
|
|
type FileListProps = {
|
|
uploadedFiles: File[];
|
|
downloadFiles: File[];
|
|
downloadingFiles: Set<number>;
|
|
onFileClick: (fileId: number, fileName: string) => void;
|
|
};
|
|
|
|
export const FileList = ({
|
|
uploadedFiles,
|
|
downloadFiles,
|
|
downloadingFiles,
|
|
onFileClick
|
|
}: FileListProps) => {
|
|
return (
|
|
<div className={styles.filesContainer}>
|
|
<div className={styles.filesColumn}>
|
|
<h3><FaUpload /> Uploaded Files</h3>
|
|
<div className={styles.filesList}>
|
|
{uploadedFiles.map(file => (
|
|
<FileItem
|
|
key={file.id}
|
|
id={file.id}
|
|
fileName={file.file_name}
|
|
createdAt={file.created_at}
|
|
isDownloading={downloadingFiles.has(file.id)}
|
|
onFileClick={onFileClick}
|
|
/>
|
|
))}
|
|
{uploadedFiles.length === 0 && (
|
|
<p className={styles.noFiles}>No uploaded files</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className={styles.filesColumn}>
|
|
<h3><FaDownload /> Files for Download</h3>
|
|
<div className={styles.filesList}>
|
|
{downloadFiles.map(file => (
|
|
<FileItem
|
|
key={file.id}
|
|
id={file.id}
|
|
fileName={file.file_name}
|
|
createdAt={file.created_at}
|
|
isDownloading={downloadingFiles.has(file.id)}
|
|
onFileClick={onFileClick}
|
|
/>
|
|
))}
|
|
{downloadFiles.length === 0 && (
|
|
<p className={styles.noFiles}>No files for download</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|