Ecommerce Dashboard - Copy this React, Tailwind Component to your project

Objective: Build a single page web application for a fictional e commerce dashboard. The application should display a list of products, allow for filtering and sorting, and support loading more products dynamically as the user scrolls. The focus should be on code structure, design patterns, dynamic data loading, responsiveness, and optimization. Requirements 1. Product List View ○ Fetch and display a list of products from a provided API endpoint. Each product should show basic details like name, price, category, and image. ○ The list should support infinite scrolling or "load more" functionality, loading more products as the user scrolls down. 2. Filtering and Sorting ○ Implement filter options to allow users to filter products by category, price range, and rating. ○ Provide sorting options (e.g., price low to high, high to low). ○ Filters and sorting should work together seamlessly without reloading the page. 3. Product Details Modal ○ When clicking on a product, show a modal with additional details (e.g., description, availability, detailed image). ○ The modal should load data dynamically for optimized performance. 4. Responsive Design ○ The application should be responsive, supporting both mobile and desktop views. ○ Use a grid layout for desktop and a list layout for mobile, adapting seamlessly based on screen size. 5. Optimized Code and Best Practices ○ Use structured code and modular components. ○ Follow design patterns relevant to front end development (e.g., Container Presenter, Singleton for state management). ○ Optimize images and other assets to reduce load time. ○ Apply lazy loading for images and components where appropriate. 6. Error Handling and Loading States ○ Include error handling for network requests, showing user friendly messages if loading fails. ○ Display loading indicators for data fetches to improve the user experience.