As a senior frontend developer at a company that specializes in creating e-commerce platforms, you have been tasked with building a new feature for a client's website. The client sells handmade jewelry and wants to allow customers to filter their search results by multiple criteria such as price, color, material, and occasion.
Your task is to create a React component that implements the filtering feature using the following requirements:
- Price range: A slider that allows the customer to select a range of prices for the jewelry.
- Color: A dropdown list with the available colors for the jewelry.
- Material: A dropdown list with the available materials for the jewelry.
- Occasion: A dropdown list with the available occasions for the jewelry (e.g. birthday, wedding, anniversary, etc.).
- The component should be able to update the search results in real-time as the customer changes the filters.
- The component should be able to save the selected filters in the URL so that the customer can easily share the filtered search results with others.
- The component should be accessible and responsive, meaning that it should be usable on both desktop and mobile devices.
A mock data that provides access to the jewelry data. The data returns an array of jewelry objects, each with the following properties:
- id: A unique identifier for the jewelry.
- name: The name of the jewelry.
- price: The price of the jewelry.
- color: The color of the jewelry.
- material: The material of the jewelry.
- occasion: The occasion for which the jewelry is suitable.
- A React component library that you can use to build the form and display the search results.