Media Management Interface - Copy this Html, Bootstrap Component to your project

Title: "Media Management Interface" General Layout: A modern content management interface for managing images, videos, and 3D files. The title "Media Management" should be at the top left. Use a clean, minimalist design with a light color scheme and blue accents for buttons. Top Section: Search Bar: Include a search bar at the top right for finding specific media files. Filters: Place filters horizontally below the search bar, in this order: File Type dropdown (All File Types, Image, Video, 3D) Date Range picker (displayed as dd/mm/yyyy with a calendar icon) Size dropdown (All Sizes, options for different file size ranges) Action Buttons: Position action buttons below the filter options, aligned to the right: Search button (blue, primary action) Reset button (to clear all filters) Add New button (green, for uploading new files) Main Table: Columns: Include "Type," "Thumbnail," "Name," "Created Date," "File Type," "Size," and "Actions". File Type Icons: Use appropriate icons to represent file types (e.g., camera for images, video camera for videos, 3D cube for 3D files). Thumbnails: Display larger, visually prominent thumbnails for easy content identification. Action Buttons: For each file, include "Download," "Edit," and "Delete" buttons using intuitive icons. Pagination: At the bottom of the table, include pagination controls. Color Scheme: Use a light background with blue accents for primary actions. Ensure high contrast for readability. Use consistent, intuitive icons throughout. Additional Features: Preview Function: Allow users to preview media files, including a 3D viewer for 3D files. Bulk Actions: Enable selecting multiple files for batch operations. Responsive Design: Ensure the interface adapts well to different screen sizes. main color is #4676FB using html boostrap4 font awesome don't use react