Migrate `CommonComponents` from `nodejs.dev`

[ovflowd]

To kick off the migration of Components from the nodejs.dev repository, we should start migrating the CommonComponents from the nodejs.dev repository.

This issue will keep track of these components and their development progress. Remember that #5191 should be done first, as we want to migrate Components and add Storybooks for them.

The Migration of each Component

• Each Component should go under components/Common folder on this repository
• Each Component has its sub-folder (e.g., components/Common/Banner)
• The folder structure should pretty much be the same (CSS components, React, and sub-components), but feel free to make changes if you see deemed
• Please add some if the Component does not have unit tests already. At least to ensure the Component is rendering. If the Component has states/CTAs (Buttons/Triggers), please cover them too.
• The Storybook of each component should allow interaction with all possible states of the Component
• If the Component depends on Hooks, please migrate them too, with the following caveat:
  • If that component only uses the Hook, move it to the same folder of the Component
  • Otherwise, migrate it to the hooks folder of the repository.
• If the Component has a Gatsby-specific logic (e.g. Dark Theme Switcher), if it is straightforward enough (e.g. a dark theme switcher plugin for Next.js or it is simple enough to code by ourselves, e.g. a Hook that we manage together with a React Provider) then feel free to do it.
  • Otherwise, if you have questions, please ask them on this Issue or your Draft PR for the Component.

List of Components to Migrate

• AnimatedPlaceholder @HinataKah0
• Banner @manishprivet
• DarkModeToggle @shanpriyan
• Dropdown @ktssr
• LanguageSelector @ktssr
• RandomContributor @ovflowd
• SectionTitle @araujogui
• ShellBox @AugustinMauroy

Components not to migrate

• Hero
  • The Hero Component will be directly part of the Home-page Layout and will be migrated afterwards once we start designing the Home Layout (It will reside under components/Home)
• SearchBar
  • The Search Bar component is complex and requires first content-indexing, which probably requires SSR. Nevertheless, a dedicated issue will be opened for the component so that research and development might be completed.
• SEO
  • The SEO component is obsolete and does not require a counterpart here as we already have a replacement.

[AugustinMauroy]

Can I Take random Contributor ?

[ovflowd]

You can, but I also wanted to work on that, mostly because I want to simplify the monster logic from https://github.com/nodejs/nodejs.dev/blob/main/src/hooks/useNodeJsContributorsApi.tsx#L147.

[AugustinMauroy]

Oh ok do it claudio . I will do Shellbox.

[shanpriyan]

I will start with DarkModeToggle

[ovflowd]

Friendly reminder that #5191 needs to be done first.

[harshitphoenix]

I will be working on Dropdown component

[manishprivet]

I can work on the Banner component here