ui/src/components/MediaList/MediaList.js

import React from 'react';
import { useDropzone } from 'react-dropzone';
import './MediaList.css'

function MediaList({ files, selectedFile, onFileSelect, onDropNewFiles }) {
    const { getRootProps, getInputProps, isDragActive } = useDropzone({
        onDrop: onDropNewFiles,
    });

    return (
        <div className='explorer'>
            <h3 className='menu-title' >Files</h3>
            <ul className='file-list-group' >
                {files.map((file) => (
                    <li
                        className='file-list-item'
                        key={file.name}
                        style={{
                            backgroundColor: selectedFile === file ? '#f0f0f0' : 'transparent'
                        }}
                        onClick={() => onFileSelect(file)}
                    >
                        {file.name}
                    </li>
                ))}
            </ul>
            <div className='file-input-block' {...getRootProps()} >
                <input {...getInputProps()} />
                {isDragActive ? (
                    <p className='label' >Drop here</p>
                ) : (
                    <p className='label' >Drag new files</p>
                )}
            </div>
        </div>
    );
}

export default MediaList;