hngprojects / hng_boilerplate_nextjs

https://deployment.nextjs.boilerplate.hng.tech
206 stars 264 forks source link

[FEATURE]: [PHOENIX] [FE] Implement Filter by Price List Icon #1382

Open Olnuel opened 2 months ago

Olnuel commented 2 months ago

Description

Implement a "Filter by Price" feature using an icon within the product listing interface. Users should be able to click the "Filter by Price" icon to sort and filter the products based on their price range.

Acceptance Criteria

  1. The "Filter by Price" icon should be visible and positioned in the product listing interface.
  2. Clicking the icon should open a dropdown allowing users to select a price range or sort products by price.
  3. The product list should be updated immediately to reflect the selected price filter.

Links

| FIGMA LINK https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=771-13780&t=VEj4y3G0vEn4g18k-4

Images

https://www.loom.com/share/8d931d6ab37942a5a482401f6df0926f?sid=53093542-6803-4ddd-9007-4e376b8e8c18

https://www.loom.com/share/abb2ae7ffb0247c8a7a0537978b41083?sid=592ef2f0-5fc2-4e65-a93b-bb00f2d0edeb

filter by status

SAGHEDEV commented 2 months ago

I'm on it