add a file filter

src/components/MediaList/MediaList.css

@@ -3,6 +3,12 @@
     margin: 15px 0;
 }
 
+.file-filter{
+    box-sizing: border-box;
+    width: 100%;
+    padding: 4px 8px;
+}
+
 .file-list-group {
     padding: 0;
     list-style-type: none;

src/components/MediaList/MediaList.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import './MediaList.css'
 
@@ -6,12 +6,25 @@ function MediaList({ files, selectedFile, onFileSelect, onDropNewFiles }) {
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
         onDrop: onDropNewFiles,
     });
+    const [filteredFiles, setFilteredFiles] = useState(files);
+
+    useEffect(()=>{
+        setFilteredFiles(files);
+    },[files])
+
+    
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        const filtered = files.filter((file) => file.name.toLowerCase().includes(value.toLowerCase()));
+        setFilteredFiles(filtered);
+    }
 
     return (
         <div className='explorer'>
             <h3 className='menu-title' >Files</h3>
+            <input className='file-filter' type='text' placeholder='Filename' onChange={handleInputChange}/>
             <ul className='file-list-group' >
-                {files.map((file) => (
+                {filteredFiles.map((file) => (
                     <li
                         className='file-list-item'
                         key={file.name}