Added SearchBar file to components folder

[joriordan332]

Description

Implemented a search bar so that our user can filter their shopping list items.

Related Issue

Closed #7

Acceptance Criteria

• A form is added to the top of the List view, above the shopping list
• The form includes the following elements
  • A text field (with semantic <label>!) which narrows down the list as the user types
  • When there’s text in the field, some kind of button (e.g., an X) to clear the field. When the field is cleared, the list is reset to its unfiltered state.

Type of Changes

Feature

Updates

Before

After

Testing Steps / QA Criteria

-Run git pull git checkout jo-qg-shopping-list-filter
-Open with npm start
-Navigate to List to find the search bar
-Items in the list will be filtered according to the user input in the search bar

[github-actions]

Visit the preview URL for this PR (updated for commit 761be2a):

https://tcl-79-smart-shopping-list--pr23-jo-qg-shopping-list-0ua4b9g9.web.app

_{(expires Fri, 06 Sep 2024 14:44:25 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: d91d9ddbda780208241c52942f544acf8e81407a}

[Hudamabkhoot]

Great work! 👏 I just left a comment about a small change to the filtering for better accuracy.