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 { 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() { |
|||
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; |
Loading…
Reference in new issue