Issue #6 | filter list

[patty-rose]

Description

This PR adds a text input to the List component that when filled filters the list for any items where the name contains the search term. This also adds a button to clear the search field, which only displays when the field has characters in it.

Related Issue

Closes #6

Acceptance Criteria

• [x] A form is added to the top of the List view, above the shopping list
• [x] 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

	Type
	:bug: Bug fix
✓	:sparkles: New feature
	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Before

After

https://github.com/the-collab-lab/tcl-65-smart-shopping-list/assets/101524326/c8bd3c79-212a-4f77-8d89-d798bf14cf7c

Testing Steps / QA Criteria

-using the GH preview, navigate to /list -type in the filter field, successful when you see the list filtering -use the x to clear the filter, successful if field clears and the list returns to original data

[github-actions[bot]]

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

https://tcl-65-smart-shopping-list--pr20-sb-po-filter-list-fiqu5hyp.web.app

_{(expires Tue, 05 Sep 2023 02:46:54 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: a91b8fb0f37677e20d8afa3e8ea496251536f9b8}