Filter Button With Pop-Up Box

[dilanurbayraktar]

So many tutees, gotta filter them!

Summary 💻

You will create a new component file (filter_button.tsx), which will displays a "Filter" button and a pop-up box when clicked, as shown on Figma. Your page should have a "Filters" button as shown by the Figma and when it is clicked, it should pop up a 'modal' where the user can choose to select different filters. The "apply" button should be non-functional, but the "reset" button should reset the fields that the user selected.

Deliverables 🚀

• Schedule at least two meetings as a pair
• Create a new branch using the "create a branch" button
• Create your page in /src/components/
• Style the page to match the footer in the wireframe (see below).
• Include a route to your page in App.jsx
• Open a PR and request review from @brandondionisio.

Wireframe 🎨

Here's the wireframe.

Reference:

Tip for success 📈

• Use the SVG files in src/assets/images/filter. Here's a breakdown of each:

1. filter.svg: The icon in the "Filters" button.
2. close_button.svg: The icon for the "close" button on the pop-up box.

• The fields in the pop-up box:

1. Grade Level, which is a drop down, with options for all grades from 1st to 12th. (Use the src/assets/images/dropdown.svg for the icon in the drop down button). You should be able to select multiple grade tags!
2. Subjects, which is a multi-select, with the options listed on the wireframe.
3. Tutoring mode, with two options: Virtual Only and In-Person Only. Only one can be selected.
4. Disability, with two options: Yes and No. Only one can be selected.

• The buttons in the pop-up box:

1. Reset: Deselects all selected fields.
2. Apply: Doesn't have to do anything.

• To apply "inter" font styling, use the tailwind class "font-interBlack" and then use any supplementary font weight styling for thinness or boldness. Use "italic" for italicized text.
• Try to avoid using inline css styling for divs when you don't need to! You can use tailwind for most styling and it makes the code more consistent.

Where to get help!

Reach out to @dilanurbayraktar and @brandondionisio.