Create Map Search Component

[toreylittlefield]

Map Search Component with a dropdown for the search results (autocomplete). Some call it a combobox.

For now let's just use mock data. It doesn't need to you can use static coordinates and the map will navigate to that location. In the future we'll implement an api for the search results like openstreetmaps api.

Use Hero Icons. All icons are Hero Icons.
https://heroicons.com/

Figma File for Design Spec
https://www.figma.com/file/1JldbWl3Pe6fir7V3aMotw/Pet-Poison-Alert-Figma-Design?node-id=9%3A353&t=5DE50BmBomMhd8an-1

[toreylittlefield]

@Netdreion as discussed the mock data could be something like this for now. It's up to you. After this ticket we'll create a new issue to use some free api to autocomplete the search input with a fetch.

const mockSearchLocationData ={
    "results": [
        {
            lat: 40.7128,
            lng: -74.0060,
            name: "New York, NY, USA",
        },
        {
            lat: 37.7749,
            lng: -122.4194,
            name: "San Francisco, CA, USA",
        },
        {
            lat: 34.0522,
            lng: -118.2437,
            name: "Los Angeles, CA, USA",
        },
        {
            lat: 41.8781,
            lng: -87.6298,
            name: "Chicago, IL, USA",
        },
    ]
}

// function to get the location data with autocomplete
function getSearchLocationData(searchText) {
    const results = mockSearchLocationData.results.filter((result) => {
        return result.name.toLowerCase().includes(searchText.toLowerCase());
    });
    return results;
}