add css files for components

2026-04-23 01:36:34 +00:00 · 2025-03-26 20:30:27 +02:00
parent e18157648c
commit 9e6596f1e0
15 changed files with 301 additions and 253 deletions
@@ -0,0 +1,39 @@
+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;