import React , { CSSProperties } from 'react' ; import { Select } from 'antd' ; import { GlobalOutlined } from '@ant-design/icons' ; import { Languages } from 'constants/languages/language-options' ; export default function LanguageSelector ( { disableLang , } ) { const selectStyle = { display : 'flex' , alignItems : 'center' , justifyContent : 'space-evenly' , cursor : 'pointer' , height : 30 , fontWeight : 500 , } ; const renderLanguageOption = ( lang ) => { if ( disableLang === lang ) { return null ; } return ( < Select . Option class = "language-select-option" value = { lang } > < div > { Languages [ lang ] . long } < /div> < /Select.Option>); } ; let currentSelectedLanguage = localStorage . getItem ( 'lang' ) || 'en' ; const setLanguage = ( newLanguage ) => { currentSelectedLanguage = newLanguage ; localStorage . setItem ( 'lang' , newLanguage ) ; window . location . reload ( ) ; } ; return ( < div className = "language-selector" > < GlobalOutlined /> < Select className = "medium" style = { { ... selectStyle , } } value = { Languages [ currentSelectedLanguage ] . long } onChange = { newLanguage => { setLanguage ( newLanguage ) ; } } > { Object . keys ( Languages ) . map ( renderLanguageOption ) } < /Select> < /div>); }