Domain:
Coding

Difficulty:
Beginner

Problem / steps to reproduce (for bugs)

• On the search results page, the search bar has an "X" (clear) button.
• Currently, clicking the "X" does nothing.
• Users expect that clicking the "X" will:
  • Clear the search input
  • Reset all search-related content (results, filters, selected languages if applicable)

Expected outcome / task:

• Update the search bar functionality so that:
  • Clicking the "X" button clears the search input field
  • Resets all search results and related content to the initial state
  • Optionally, reset selected Destination Language 1 and 2 to defaults if needed
• Ensure the UI updates immediately after clicking the "X"

Any links or references:

• React Hook Form: Reset Form
• Radix UI Input
• Tailwind CSS Buttons / Icons

Setup Steps (short):

• Ensure the project runs locally (yarn install && yarn dev).
• Locate the search bar component on the results page.
• Add an event handler to the "X" button to:
  • Clear the search input
  • Reset search results and related state using React state or reset from React Hook Form
• Test by entering a search term, clicking the "X", and confirming that all content is cleared and the search state is reset.