Product Listing Page - Copy this React, Tailwind Component to your project

1. Overall Structure This page will display a list of products under certain categories, such as electronics, clothing, books, home appliances, etc. Users can select a category from the menu or through the navigation bar to view the corresponding products. This page plays an important role in helping users quickly search for products according to their interests and needs. 2. Navigation Bar: Location: Located at the top of the page. Function: Allows users to select specific categories such as "Electronics", "Clothing", "Books", "Home appliances", etc. Description: Includes a dropdown menu or category buttons, a search bar to filter products. Users can enter the product name for quick search or use detailed filters. Filter: Filter allows users to narrow down the product range based on criteria such as: Price: From low to high, from high to low. Product Status: New, Used, Used. Location: Filter by location, helping users find products near them. Specific brand or product type (if available). 3. Product Grid Display: Location: In the middle of the page. Function: Display all products in the selected category in a grid or list, with product image, name, price, and status. Description: Each product will be displayed through a card, including the following elements: Product Image: The main photo of the product. Product Name: The name of the item to be exchanged. Price or type of exchange: If the product is exchanged, it will be labeled "exchange", or if there is a price, it will be displayed. Condition: Display the status as "new", "used", "used". Seller: Display the name or nickname of the seller/exchanger. Interaction: Users can click on a product to see more details. There is an "Add to Cart" or "Request Exchange" button. 4. Advanced Filters: Location: Usually located on the left or top of the product grid. Function: Helps users narrow down search results more specifically based on specific criteria. Description: Filters will include: Price Range: A slider that allows users to select a suitable price range. Geographic Area: Filter by area to find products near the user's location. Post Date: Sort by recent or older post time. View Count: Products with the most views. 5. Pagination: Location: Located at the bottom of the product list. Function: If the category has many products, it will be divided into multiple pages. Users can navigate through the pages by selecting the page number or using the "Next Page" button. Description: Pagination helps pages load faster and users can easily browse through products without being overloaded with information. 6. Sidebar (Sidebar if available): Location: On the left side of the page (or can be hidden/shown as needed on mobile devices). Function: Includes quick filters or related subcategories. In addition, it can contain advertisements, featured products, or suggestions from the system. Description: The sidebar can include elements such as: List of subcategories. Suggested products based on the user's search or browsing history. Advertisements or promotions (if any). 7. User Interactions: Save favorite products: Users can click the "Save" or "Favorites" button to add products to their favorites list, and can review them later. Share products: There are buttons to share via social networks or share product links. 8. Show Featured or Sponsored Products: Location: Can be at the top or in between regular products. Function: For products that sellers pay extra to be featured, or products that are recommended by the system based on popularity or high ratings. Description: These products will be displayed larger and more visible than regular products. User Experience: Intuitive interface, easy to navigate. The page should be optimized for both desktop and mobile devices, with the ability to change from grid to list display, depending on user preference. The page load speed should be fast to ensure users have a smooth experience when browsing through many products.