🚧 wip migrate to next-i18n

src/components/Settings/CommonSettings.tsx

@@ -1,5 +1,6 @@
 import { Text, SegmentedControl, TextInput, Stack } from '@mantine/core';
 import { useState } from 'react';
+import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import { WidgetsPositionSwitch } from '../WidgetsPositionSwitch/WidgetsPositionSwitch';
@@ -7,11 +8,14 @@ import ConfigChanger from '../Config/ConfigChanger';
 import SaveConfigComponent from '../Config/SaveConfig';
 import ModuleEnabler from './ModuleEnabler';
 import Tip from '../layout/Tip';
-import { t } from 'i18next';
 import LanguageSwitch from './LanguageSwitch';
 
 export default function CommonSettings(args: any) {
   const { config, setConfig } = useConfig();
+  const { t } = useTranslation([
+    'settings/general/search-engine',
+    'settings/general/config-changer',
+  ]);
 
   const matches = [
     { label: 'Google', value: 'https://google.com/search?q=' },
@@ -28,12 +32,12 @@ export default function CommonSettings(args: any) {
   return (
     <Stack mb="md" mr="sm">
       <Stack spacing={0} mt="xs">
-        <Text>{t('settings.tabs.common.settings.searchEngine.title')}</Text>
-        <Tip>{t('settings.tabs.common.settings.searchEngine.tips.generalTip')}</Tip>
+        <Text>{t('title')}</Text>
+        <Tip>{t('tips.generalTip')}</Tip>
         <SegmentedControl
           fullWidth
           mb="sm"
-          title={t('settings.tabs.common.settings.searchEngine.title')}
+          title={t('title')}
           value={
             // Match config.settings.searchUrl with a key in the matches array
             searchUrl
@@ -55,10 +59,10 @@ export default function CommonSettings(args: any) {
         />
         {searchUrl === 'Custom' && (
           <>
-            <Tip>{t('settings.tabs.common.settings.searchEngine.tips.placeholderTip')}</Tip>
+            <Tip>{t('tips.placeholderTip')}</Tip>
             <TextInput
-              label={t('settings.tabs.common.settings.searchEngine.customEngine.label')}
-              placeholder={t('settings.tabs.common.settings.searchEngine.customEngine.placeholder')}
+              label={t('customEngine.label')}
+              placeholder={t('customEngine.placeholder')}
               value={customSearchUrl}
               onChange={(event) => {
                 setCustomSearchUrl(event.currentTarget.value);
@@ -80,7 +84,7 @@ export default function CommonSettings(args: any) {
       <LanguageSwitch />
       <ConfigChanger />
       <SaveConfigComponent />
-      <Tip>{t('settings.tabs.common.settings.configTip')}</Tip>
+      <Tip>{t('configTip')}</Tip>
     </Stack>
   );
 }