feat: use react-select in lang-selector component

src/components/LangSelector.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
+import Selector from './Selector';
 
 export default function LangSelector() {
   const router = useRouter();
@@ -13,22 +14,14 @@ export default function LangSelector() {
   const languages = ['en', 'fr'];
 
   return (
-    <select
+    <Selector
       name='lng-select'
-      id='lng-select'
-      onChange={(event) => {
-        onToggleLanguageClick(event.target.value);
-      }}
       value={i18n.language}
-    >
+      onChangeCallback={(value: string) => onToggleLanguageClick(value)}
-      {languages.map((lang) => (
+      options={languages.map((lang: 'fr' | 'en') => ({
-        <option
+        label: t(`common:language.${lang}`),
-          key={lang}
+        value: lang,
-          value={lang}
+      }))}
-        >
+    />
-          {t(`common:language.${lang as 'fr' | 'en'}`)}
-        </option>
-      ))}
-    </select>
   );
 }

src/components/Selector.tsx

@@ -70,6 +70,7 @@ export default function Selector({
         options={options}
         ref={innerRef}
         isDisabled={disabled}
+        menuPlacement='auto'
       />
     </div>
   );