Problem Description

A major component of the course catalog feature is to allow users to search and filter for specific courses so that they can compare them. This task involves implementing the middle pane in the course catalog, which displays a search interface similar to the existing one on the Schedule tab in the live app (but will will surface more options than the filter/search interface on the Schedule tab).

Mockups (link to Figma)

Note: the Figma also has useful interaction flow annotations

Collapsed filters

Fully expanded filters

Dropdown states

Result item variants (top: when the corresponding course is selected (either on the left or as a preview), bottom: default)

Overall mockup

Your Goal

• Implement the search/query pane as a component that allows the user to search for classes using a modified version of the same query components used on the front page (note: you will probably need to modify this existing component to add togglable support for the additional filters)
• Implement a list of search results
  • Each item has the combined course ID (subject + number), the course name, and two buttons:
    • The "plus" button will 1. add the course to the user's set of courses if it is not already there and 2. select the course to become the active course to display
    • The "i" button will simply set the course to become the active course to display
  • If there are no courses that fit the user's query, then there will be a placeholder instead (see the Figma document)