76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { initReactI18next, useTranslation } from 'react-i18next';
|
|
import i18n from 'i18next';
|
|
import translationEN from '../translate/en.json';
|
|
import translationAR from '../translate/ar.json';
|
|
import translationDE from '../translate/de.json';
|
|
|
|
const language = localStorage.getItem('language') ?? 'en';
|
|
|
|
i18n.use(initReactI18next).init({
|
|
resources: {
|
|
en: {
|
|
translation: translationEN
|
|
},
|
|
ar: {
|
|
translation: translationAR
|
|
},
|
|
de: {
|
|
translation: translationDE
|
|
}
|
|
},
|
|
lng: language,
|
|
interpolation: {
|
|
escapeValue: false
|
|
}
|
|
});
|
|
|
|
|
|
export function useLanguage() {
|
|
useEffect(() => {
|
|
changeLanguage(language);
|
|
}, [language]);
|
|
|
|
const changeLanguage = (newLanguage:any) => {
|
|
i18n.changeLanguage(newLanguage);
|
|
localStorage.setItem('language', newLanguage);
|
|
applyLanguageStyles(newLanguage);
|
|
};
|
|
|
|
return { changeLanguage };
|
|
}
|
|
|
|
function applyLanguageStyles(language:any) {
|
|
if (language === 'ar') {
|
|
document.body.setAttribute('dir', 'rtl');
|
|
document.body.classList.remove('de');
|
|
document.body.classList.add('ar');
|
|
} else if (language === 'en') {
|
|
document.body.setAttribute('dir', 'ltr');
|
|
document.body.classList.remove('ar', 'de');
|
|
document.body.classList.add('en');
|
|
} else if (language === 'de') {
|
|
document.body.setAttribute('dir', 'ltr');
|
|
document.body.classList.remove('ar');
|
|
document.body.classList.add('de');
|
|
}
|
|
|
|
}
|
|
|
|
export function useLanguageMenu() {
|
|
const { t } = useTranslation();
|
|
const { changeLanguage } = useLanguage();
|
|
|
|
const languageOptions = [
|
|
{ code: 'ar', icon: '/language/ar.svg', label: t('Arabic') },
|
|
{ code: 'en', icon: '/language/en.svg', label: t('English') },
|
|
{ code: 'de', icon: '/language/de.svg', label: t('German') }
|
|
];
|
|
|
|
const handleLanguageChange = (code:any) => {
|
|
changeLanguage(code);
|
|
};
|
|
|
|
return { languageOptions, handleLanguageChange };
|
|
}
|