Searchbar UI Component

[willy1989cv]

Issue: #29

Implement Search component and its different states.

• Initial state when user is yet to type a word:
  • Facets (in, before, after...) filtering
  • Recently searched
• When user starts typing:
  • Datasets results
  • Indicators results
  • Others

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tdc-data-portal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 6, 2024 0:35am

[luccasmmg]

1 - If you type in:something then hit space, it should have an in:something in the combobox, you need to keep this state,
2 - besides i cant select anything
3 - If you click on in: it should create an input in the combobox with in: already there

Another possibility is that everytime you type something and click on the in section, it automatically adds an item with in:{what you typed}

Essentially that combobox needs to be behind the scenes a form that hold

{
in: z.string()
after: z.string()
before: z.string()
sector: z.string()
indicator: <- Not sure on this one
}

Besides it should show some datasets as well

Check this

Screencast.from.2024-09-03.10-15-42.webm

[Gutts-n]

It should present the user's selected filter. I clicked in in: and the input didn't present the in as the mockup

The text does not change the color of the dataset title as the mockup:

Not required but good to improve the UX

It would be good to have a backspace listener to remove the tag when the user types backspace and there isn't text in the input.