diff --git a/i18n.js b/i18n.js index 376f28d..12d8a9d 100644 --- a/i18n.js +++ b/i18n.js @@ -19,6 +19,15 @@ const capitalize = { }, }; +export const supportedLanguages = { + de: { name: 'Deutsch', flag: '🇩🇪' }, + en: { name: 'English', flag: '🇬🇧' }, + es: { name: 'Español', flag: '🇪🇸' }, + fr: { name: 'Français', flag: '🇫🇷' }, + it: { name: 'Italiano', flag: '🇮🇹' }, + ru: { name: 'Русский', flag: '🇷🇺' }, +}; + i18n .use(HttpApi) .use(LanguageDetector) @@ -43,7 +52,7 @@ i18n }, lng: navigator.language, ns: ['auth', 'core', 'group', 'tutorial'], - supportedLngs: ['en', 'it', 'es', 'fr', 'de', 'ru'], + supportedLngs: Object.keys(supportedLanguages), }); export default i18n; diff --git a/src/App.tsx b/src/App.tsx index ba57d99..cfefb34 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -137,6 +137,7 @@ import { GeneralNotifications } from './components/GeneralNotifications'; import { PdfViewer } from './common/PdfViewer'; import ThemeSelector from './components/Theme/ThemeSelector.tsx'; import { useTranslation } from 'react-i18next'; +import LanguageSelector from './components/Language/LanguageSelector.tsx'; type extStates = | 'not-authenticated' @@ -3704,6 +3705,7 @@ function App() { /> )} + ); diff --git a/src/ExtStates/NotAuthenticated.tsx b/src/ExtStates/NotAuthenticated.tsx index 28892a9..2574f96 100644 --- a/src/ExtStates/NotAuthenticated.tsx +++ b/src/ExtStates/NotAuthenticated.tsx @@ -31,6 +31,7 @@ import { GlobalContext } from '../App'; import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'; import ThemeSelector from '../components/Theme/ThemeSelector'; import { useTranslation } from 'react-i18next'; +import LanguageSelector from '../components/Language/LanguageSelector'; const manifestData = { version: '0.5.3', @@ -1097,6 +1098,7 @@ export const NotAuthenticated = ({ /> + ); diff --git a/src/components/Apps/AppsHomeDesktop.tsx b/src/components/Apps/AppsHomeDesktop.tsx index d525c26..c77865c 100644 --- a/src/components/Apps/AppsHomeDesktop.tsx +++ b/src/components/Apps/AppsHomeDesktop.tsx @@ -15,6 +15,7 @@ import { extractComponents } from '../Chat/MessageDisplay'; import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'; import { AppsPrivate } from './AppsPrivate'; import ThemeSelector from '../Theme/ThemeSelector'; +import LanguageSelector from '../Language/LanguageSelector'; export const AppsHomeDesktop = ({ setMode, @@ -157,6 +158,7 @@ export const AppsHomeDesktop = ({ /> + ); diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx index b25d206..53937ae 100644 --- a/src/components/DesktopSideBar.tsx +++ b/src/components/DesktopSideBar.tsx @@ -8,6 +8,7 @@ import { enabledDevModeAtom } from '../atoms/global'; import { AppsIcon } from '../assets/Icons/AppsIcon'; import ThemeSelector from './Theme/ThemeSelector'; import { CoreSyncStatus } from './CoreSyncStatus'; +import LanguageSelector from './Language/LanguageSelector'; export const DesktopSideBar = ({ goToHome, @@ -139,6 +140,7 @@ export const DesktopSideBar = ({ )} + ); diff --git a/src/components/Language/LanguageSelector.tsx b/src/components/Language/LanguageSelector.tsx new file mode 100644 index 0000000..b89836d --- /dev/null +++ b/src/components/Language/LanguageSelector.tsx @@ -0,0 +1,73 @@ +import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { supportedLanguages } from '../../../i18n'; +import { Tooltip } from '@mui/material'; + +const LanguageSelector = () => { + const { i18n } = useTranslation(); + const [showSelect, setShowSelect] = useState(false); + + const handleChange = (e) => { + const newLang = e.target.value; + i18n.changeLanguage(newLang); + setShowSelect(false); + }; + + const currentLang = i18n.language; + const { name, flag } = + supportedLanguages[currentLang] || supportedLanguages['en']; + + return ( +
+ + {showSelect ? ( + + ) : ( + + )} + +
+ ); +}; + +export default LanguageSelector; diff --git a/src/components/Theme/ThemeSelector.tsx b/src/components/Theme/ThemeSelector.tsx index 42b75c0..b962e1f 100644 --- a/src/components/Theme/ThemeSelector.tsx +++ b/src/components/Theme/ThemeSelector.tsx @@ -14,7 +14,7 @@ const ThemeSelector = () => { bottom: '1%', display: 'flex', gap: '12px', - left: '1.5vh', + left: '1.2vh', position: 'absolute', }} >