From d66a10fcb3b17457fe515c4e3a22281bf24f460d Mon Sep 17 00:00:00 2001
From: titix <titi@defi.sucks>
Date: Fri, 19 Jul 2024 11:56:33 -0300
Subject: [PATCH] feat: language select

---
 src/components/BasicSelect.tsx  | 51 +++++++++++++++++++++++++++++++++
 src/components/index.ts         |  1 +
 src/config/constants.ts         |  3 +-
 src/containers/Header/index.tsx | 24 ++++++++++++++--
 src/types/Config.ts             |  5 +++-
 5 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 src/components/BasicSelect.tsx

diff --git a/src/components/BasicSelect.tsx b/src/components/BasicSelect.tsx
new file mode 100644
index 0000000..17d98c8
--- /dev/null
+++ b/src/components/BasicSelect.tsx
@@ -0,0 +1,51 @@
+import { useState } from 'react';
+
+interface BasicSelectProps {
+  value: string;
+  setValue: (explorer: string) => void;
+  list: string[];
+  disabled?: boolean;
+  dataTest?: string;
+}
+
+export const BasicSelect = ({ list, value, setValue }: BasicSelectProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const selectItem = (explorer?: string) => {
+    setIsOpen(false);
+    if (!explorer) return;
+    setValue(explorer);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLLIElement>, explorer?: string) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      selectItem(explorer);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={handleClick}>{value}</button>
+      {isOpen && (
+        <ul role='listbox'>
+          {list.map((item) => (
+            <li
+              key={item}
+              role='option'
+              tabIndex={0}
+              aria-selected={item === value}
+              onClick={() => selectItem(item)}
+              onKeyDown={(event) => handleKeyDown(event, item)}
+            >
+              {item}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index e2912ee..32d0a17 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,3 +6,4 @@ export * from './SearchBar';
 export * from './TotalValueLocked';
 export * from './Title';
 export * from './TitleBanner';
+export * from './BasicSelect';
diff --git a/src/config/constants.ts b/src/config/constants.ts
index d2f469a..42d7405 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -1,7 +1,8 @@
 import { Constants } from '~/types';
 
 const constants: Constants = {
-  // Put your project constants here
+  SUPPORTED_LANGUAGES: ['en', 'es'],
+  DEFAULT_LANG: 'en',
 };
 
 export const getConstants = (): Constants => {
diff --git a/src/containers/Header/index.tsx b/src/containers/Header/index.tsx
index 6afb5cd..6519891 100644
--- a/src/containers/Header/index.tsx
+++ b/src/containers/Header/index.tsx
@@ -1,20 +1,38 @@
-import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { styled } from '@mui/material/styles';
 import { IconButton } from '@mui/material';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
 
+import { BasicSelect } from '~/components';
 import { useCustomTheme } from '~/hooks/useContext/useTheme';
 import { zIndex, HEADER_HEIGHT } from '~/utils';
+import { getConfig } from '~/config';
+
+const { DEFAULT_LANG } = getConfig();
 
 export const Header = () => {
   const { changeTheme, theme } = useCustomTheme();
+  const {
+    t,
+    i18n: { changeLanguage, language },
+  } = useTranslation();
+  const { locales, replace } = useRouter();
+
+  const localesMap = locales ? Object.fromEntries(locales.map((locale) => [locale, t(`LOCALES.${locale}`)])) : {};
+
+  const handleChangeLanguage = (value: string) => {
+    const locale = Object.keys(localesMap).find((key) => localesMap[key] === value) || DEFAULT_LANG;
+    replace('/', undefined, { locale: locale });
+    changeLanguage(locale);
+  };
 
   return (
     <StyledHeader>
-      <Logo>Logo</Logo>
+      <Logo>ZKchainHub</Logo>
       <SIconButton onClick={changeTheme}>{theme === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}</SIconButton>
-      <ConnectButton />
+      <BasicSelect value={t(`LOCALES.${language}`)} setValue={handleChangeLanguage} list={Object.values(localesMap)} />
     </StyledHeader>
   );
 };
diff --git a/src/types/Config.ts b/src/types/Config.ts
index 3bd98b1..e818436 100644
--- a/src/types/Config.ts
+++ b/src/types/Config.ts
@@ -5,8 +5,11 @@ export interface Env {
   API_URL: string;
 }
 
+export type SupportedLanguage = 'en' | 'es';
+
 export interface Constants {
-  // ...
+  SUPPORTED_LANGUAGES: SupportedLanguage[];
+  DEFAULT_LANG: SupportedLanguage;
 }
 
 export interface Config extends Env, Constants {}