feat: language select

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>
+  );
+};

src/components/index.ts

@@ -6,3 +6,4 @@ export * from './SearchBar';
 export * from './TotalValueLocked';
 export * from './Title';
 export * from './TitleBanner';
+export * from './BasicSelect';

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 => {

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>
   );
 };

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 {}