feat: improve header to set locale + remove setup page

components/Header/Language/Arrow.tsx

@@ -0,0 +1,16 @@
+export const Arrow: React.FC = () => {
+  return (
+    <svg
+      width='12'
+      height='8'
+      viewBox='0 0 12 8'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z'
+        fill='#fff'
+      />
+    </svg>
+  )
+}

components/Header/Language/LanguageFlag.tsx

@@ -0,0 +1,31 @@
+import Image from 'next/image'
+
+export interface LanguageFlagProps {
+  language: string
+}
+
+export const LanguageFlag: React.FC<LanguageFlagProps> = (props) => {
+  const { language } = props
+
+  return (
+    <>
+      <Image
+        width={35}
+        height={35}
+        src={`/images/languages/${language}.svg`}
+        alt={language}
+      />
+      <p className='language-title'>{language.toUpperCase()}</p>
+
+      <style jsx>
+        {`
+          .language-title {
+            margin: 0 8px 0 10px;
+            font-size: 16px;
+            font-family: 'Arial', 'sans-serif';
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/Header/Language/index.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react'
+import useTranslation from 'next-translate/useTranslation'
+import setLanguage from 'next-translate/setLanguage'
+
+import { Arrow } from './Arrow'
+import { LanguageFlag } from './LanguageFlag'
+import { locales } from 'i18n.json'
+
+export const Language: React.FC = () => {
+  const { lang: currentLanguage } = useTranslation()
+  const [hiddenMenu, setHiddenMenu] = useState(true)
+
+  useEffect(() => {
+    if (!hiddenMenu) {
+      window.document.addEventListener('click', handleHiddenMenu)
+    } else {
+      window.document.removeEventListener('click', handleHiddenMenu)
+    }
+
+    return () => {
+      window.document.removeEventListener('click', handleHiddenMenu)
+    }
+  }, [hiddenMenu])
+
+  const handleLanguage = async (language: string): Promise<void> => {
+    await setLanguage(language)
+    handleHiddenMenu()
+  }
+
+  const handleHiddenMenu = (): void => {
+    setHiddenMenu(!hiddenMenu)
+  }
+
+  return (
+    <>
+      <div className='language-menu'>
+        <div className='selected-language' onClick={handleHiddenMenu}>
+          <LanguageFlag language={currentLanguage} />
+          <Arrow />
+        </div>
+        {!hiddenMenu && (
+          <ul>
+            {locales.map((language, index) => {
+              if (language === currentLanguage) {
+                return null
+              }
+              return (
+                <li
+                  key={index}
+                  onClick={async () => await handleLanguage(language)}
+                >
+                  <LanguageFlag language={language} />
+                </li>
+              )
+            })}
+          </ul>
+        )}
+      </div>
+
+      <style jsx>
+        {`
+          .language-menu {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+          }
+          .selected-language {
+            display: flex;
+            align-items: center;
+            margin-right: 15px;
+          }
+          ul {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            top: 60px;
+            width: 100px;
+            padding: 10px;
+            margin: 10px 15px 0 0px;
+            border-radius: 15%;
+            padding: 0;
+            box-shadow: 0px 1px 10px var(--color-shadow);
+            background-color: var(--color-background-primary);
+            z-index: 10;
+          }
+          ul > li {
+            list-style: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 50px;
+            width: 100%;
+          }
+          ul > li:hover {
+            background-color: rgba(79, 84, 92, 0.16);
+          }
+        `}
+      </style>
+    </>
+  )
+}