Implement typeahead (mock) on home page

[brauliodiez]

On the main page (front/src/app/page.tsx) there is a reservoir search feature. I want you to:

Create a folder inside ./pods called embalse-search, and inside it have a component called embalse-search.tsx.

Move all the HTML from the root page component into embalse-search.

In that same pod, create a file called embalse-search.model.ts and define a data model for the reservoir with the following properties:

• slug: string

• name: string; // Combination of name (province)

Under pods, create a folder called api, and inside that folder:

Create a file called api.model.ts and define a data model for the API response with the following properties:

• _id: string

-name: string

• province: string

Then create a file called embalse-search.mock.ts and define an array of reservoirs with at least 40 example reservoirs.

Create a file called embalse.api.ts, and inside it create an asynchronous function called getEmbalsesCollection that returns the array of reservoirs from the mock.

In the main component (embalse-search.tsx), import the getEmbalsesCollection function and use it to fetch the reservoirs.

This list will now be used to work in TypeAhead mode in the search component of that pod. You should be able to search reservoirs by name or province and see suggestions as you type. When pressing Enter or selecting a suggestion, log it to the browser console.

For this, look for a library that works well with Tailwind and DaisyUI. Do not install a full component library like MUI, AntD, etc. Just a library that enables TypeAhead functionality—there are several options—make sure it is accessible.

[monikMononoke]

#70 Closed

Done:

• Installed downshift
• Created an EmbalseSearch component in the pods folder to keep RootPage clean
• Created an api folder for data fetching; it currently contains mocked data
• Created a components folder inside emblase-search and added the SearchIcon component