Component: Search Box

[ntad2]

Create the Search Box component. See the mockup below.

1. Create a SearchBox.js file under the 'component' folder for this component. It should have a label as well as the textbox and search icon. Default style for the label to bold and bigger font. The parent component should be able to pass the value for the label to this component as a prop, as well as some optional formatting styles, e.g. the size of the search box, an override format for the label.

2. Provide auto-fill functionality. Create a list of tangents (i.e. hobbies, collectables, crafts, etc.). Create this tangent.js file under the 'dummy-data' folder with a JSON of items. It should be 2 levels. The top level items are 'tangent-type' of Hobbies, Collectables, Sports, ... (see the mockup, the links below the search box). The second level of items are specific hobbies, collectables, etc.. (you can make up some stuff here). This data should be passed as a prop from the parent component.

3. When the user hits enter key or clicks on the search icon, pass the search text to the parent component. Do not clear the search textbox.

4. Create a parent test component, e.g. TestSearchBox.js under the 'test' folder to test this component. Include the component in the main page, e.g. App.js, and remove it when you're done testing.

[giriibm]

I'll take a look at this today.

[ntad2]

Giri, please work from the "client" folder/project which replaces the "web-app" folder/project.