Create Search Component, add to Navbar

[bmuenzenmeyer]

Create a Search component using the new figma design (direct link).

Read more about the Node.js Website redesign

This component does not do anything quite yet, but future Orama Search stories will expand upon it.

---

Before You Start...

• Use the Contributor's Guide to learn how to setup your environment, run available commands, and construct proper commits.
• Review the technologies used when building the site, and why they were chosen.
• Review the component creation guide to follow our standards.
• ❗ Review the translation guide, especially how to add new keys.

---

Details

standalone

integrated into Navbar

❓ Not sure where to start breaking down the figma? Read this short guide
🌐 This story requires some internationalization support. Slow down!

• Create a new directory called Search within the Common directory that contains all the new code.
• Use the hero icon magnifying-glass from https://heroicons.com/, already a dependency
• Add the component to Navbar per the figma
• Within https://github.com/nodejs/nodejs.org/blob/main/i18n/locales/en.json, add a new key components.header.search.empty with the value Start typing...
• Within https://github.com/nodejs/nodejs.org/blob/main/i18n/locales/en.json, add a new key components.header.search.noResults with the value No results found
• Within https://github.com/nodejs/nodejs.org/blob/main/i18n/locales/en.json, add a new key components.header.search.noResultsSuggestion with the value Perhaps try another query?

Suggested Props

Name	type	comments
onChange	function	() => {} no-op for now

Storybook

Add a storybook story file components/Common/Search/index.stories.tsx, which exercises each of the component's states.

There are 2 states to capture within styles and stories:

• Light
• Dark

[TheFossilDev]

This would be my second issue since I'm also working on the changelogModal but is it alright if I get going on this too? Of course others are welcome ✌🏼

[AugustinMauroy]

gives someone else a chance to contribute but thank you for your interest in the project. 😄

[Ragnarrlothbrok]

Hi, I would like to work on this.

[bmuenzenmeyer]

Thanks for your interest. We don't assign tickets if we can help it. Feel free to submit a pull request if you have time.
Reference 🍪 https://www.redhat.com/en/blog/dont-lick-cookie

[ovflowd]

Hey there, sadly, this issue is already locked-in and not available for grabs.

(This is specific to this issue) as we have a partner (3rd party company) being involved on the development of the search functionality of the Website. (cc @micheleriva)