Feature/add product filters

[Nomolos29]

📝 Pull Request Title

feat: Add reusable filter component with categories and price range filters

🛠️ Issue

• Closes [FEAT]: Redesign Filters UI #133

📖 Description

This PR introduces a reusable filter component for the marketplace product page. The filter allows users to:

• Select multiple categories using a searchable dropdown.
• Filter products by predefined price ranges using checkboxes.
• Apply or reset filters with dedicated buttons.

The filter component is fully responsive and accessible, ensuring a seamless user experience across all devices.

✅ Changes made

• feat: Added a reusable filter component with categories and price range filters.
• feat: Integrated the filter component with the product page.
• feat: Implemented "Apply Filters" and "Reset" functionality.
• style: Made the filter UI responsive and accessible.
• fix: Installed all required dependencies.

🖼️ Media (screenshots/videos)

• **Filter Co
  
  
  

• Responsive Design:
  
  
  

📜 Additional Notes

• The filter component uses shadcn/ui for consistent styling.
• Tailwind CSS utilities were used to ensure responsiveness.
• The filter logic is decoupled from the product page, making it reusable across the application.

[derianrddev]

@Nomolos29, Just a couple of tweaks:

• The filters are currently not aligned with the Breadcrumbs Navigation. Could you adjust them to align properly?

  

• Please uninstall react-icons and replace it with the Filter icon from lucide-react.

• The checkbox is not visible in dark mode. Could you adjust the styles to make it more visible?

  

• If the Toast component from shadcn/ui is not being used, please remove it.

I like how the filters are implemented for mobile screens. Nice job!

[Nomolos29]

All changes has been effected.

[derianrddev]

@Nomolos29 Thank you for making the changes. LGTM! 🚀Let’s wait for a second review. @danielcdz

[Nomolos29]

Oh! I see it now.

I did not understand the comment earlier, sorry about that.

[derianrddev]

@Nomolos29 No problem! It was mostly to avoid a linter error, since 'Select Filter' is an interactive element that triggers an action when the user clicks it.