Migrate Tabs to Chakra

[amit-ksh]

Description

Migrate the Tabs component from emotion to chakra

Related Issue

Closes #8639

[gatsby-cloud]

✅ ethereum-org-website-dev deploy preview ready

• Deploy preview
• Build logs · 21m build time

[pettinarip]

Hey @amit-ksh thanks for the PR.

I think the styles are correct for this but for the Tabs case, we wanted to completely remove this component and start using the Chakra's Tabs instead. Declaring a new theme under https://github.com/ethereum/ethereum-org-website/tree/dev/src/%40chakra-ui/gatsby-plugin/components as it was described in the issue #8639

You can take as an example how we did this with the Button component here https://github.com/ethereum/ethereum-org-website/blob/dev/src/%40chakra-ui/gatsby-plugin/components/Button.ts

LMK if you need help on defining the new variant for this case. I think we should override the enclosed variant as it is pretty similar to our implementation.

[amit-ksh]

Hey @pettinarip! I tried overriding the enclosed variant, but it removes the bottom border when a Tab is selected. And adding border style for selected Tab was not overriding it, so should I create a brand new variant like primary for the custom style and use it as the default variant for Tabs?

[pettinarip]

Yes @amit-ksh please, that sounds good. We can refactor the name later if we need to.

[pettinarip]

🚀 nice!