Nareshkumar Rao
3 years ago
2 changed files with 40 additions and 37 deletions
@ -1,43 +1,46 @@ |
|||||
import { Select } from "@chakra-ui/react"; |
|
||||
|
import { Select } from '@chakra-ui/react'; |
||||
import Flags from 'country-flag-icons/react/3x2'; |
import Flags from 'country-flag-icons/react/3x2'; |
||||
import { useTranslation } from "react-i18next"; |
|
||||
import { useDispatch } from "react-redux"; |
|
||||
import { setLanguage } from "../features/auth/langSlice"; |
|
||||
|
|
||||
|
import { useTranslation } from 'react-i18next'; |
||||
|
import { useDispatch } from 'react-redux'; |
||||
|
import { setLanguage } from '../features/auth/langSlice'; |
||||
|
|
||||
function LanguageSwitcher() { |
function LanguageSwitcher() { |
||||
const [, i18n] = useTranslation(); |
|
||||
const dispatch = useDispatch(); |
|
||||
|
|
||||
const currentLangIcon = (() => { |
|
||||
switch (i18n.language) { |
|
||||
case "en": |
|
||||
return <Flags.GB />; |
|
||||
case "ms": |
|
||||
return <Flags.MY />; |
|
||||
case "zh": |
|
||||
return <Flags.CN />; |
|
||||
case "ta": |
|
||||
return <Flags.IN />; |
|
||||
default: |
|
||||
return <Flags.GB />; |
|
||||
} |
|
||||
})(); |
|
||||
|
const [, i18n] = useTranslation(); |
||||
|
const dispatch = useDispatch(); |
||||
|
|
||||
const handleSelectLanguage = (e) => { |
|
||||
const languageKey = e.target.value; |
|
||||
i18n.changeLanguage(languageKey); |
|
||||
dispatch(setLanguage(languageKey)); |
|
||||
|
const currentLangIcon = (() => { |
||||
|
switch (i18n.language) { |
||||
|
case 'en': |
||||
|
return <Flags.GB />; |
||||
|
case 'ms': |
||||
|
return <Flags.MY />; |
||||
|
case 'zh': |
||||
|
return <Flags.CN />; |
||||
|
case 'ta': |
||||
|
return <Flags.IN />; |
||||
|
default: |
||||
|
return <Flags.GB />; |
||||
} |
} |
||||
return ( |
|
||||
<Select value={i18n.language} icon={currentLangIcon} variant="filled" onChange={handleSelectLanguage}> |
|
||||
<option value="en">English</option> |
|
||||
<option value="ms">Bahasa Melayu</option> |
|
||||
<option value="zh">中文</option> |
|
||||
<option value="ta">தமிழ்</option> |
|
||||
</Select> |
|
||||
|
})(); |
||||
|
|
||||
); |
|
||||
|
const handleSelectLanguage = e => { |
||||
|
const languageKey = e.target.value; |
||||
|
i18n.changeLanguage(languageKey); |
||||
|
dispatch(setLanguage(languageKey)); |
||||
|
}; |
||||
|
return ( |
||||
|
<Select |
||||
|
value={i18n.language} |
||||
|
icon={currentLangIcon} |
||||
|
variant="filled" |
||||
|
onChange={handleSelectLanguage} |
||||
|
> |
||||
|
<option value="en">English</option> |
||||
|
<option value="ms">Bahasa Melayu</option> |
||||
|
<option value="zh">中文</option> |
||||
|
<option value="ta">தமிழ்</option> |
||||
|
</Select> |
||||
|
); |
||||
} |
} |
||||
|
|
||||
export default LanguageSwitcher; |
|
||||
|
export default LanguageSwitcher; |
||||
|
Loading…
Reference in new issue