103 lines
2.7 KiB
TypeScript
103 lines
2.7 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import Select, { components, SingleValueProps, OptionProps } from 'react-select'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
type LanguageOption = { label: string; value: string }
|
|
|
|
const LANGS: LanguageOption[] = [
|
|
{ value: 'tr', label: '🇹🇷 TR' },
|
|
{ value: 'en', label: '🇬🇧 EN' },
|
|
{ value: 'fr', label: '🇫🇷 FR' },
|
|
{ value: 'es', label: '🇪🇸 ES' },
|
|
{ value: 'de', label: '🇩🇪 DE' },
|
|
]
|
|
|
|
const Option = (props: OptionProps<LanguageOption, false>) => (
|
|
<components.Option {...props}>
|
|
<span className='flex items-center gap-1'>{props.data.label}</span>
|
|
</components.Option>
|
|
)
|
|
|
|
const SingleVal = (props: SingleValueProps<LanguageOption, false>) => (
|
|
<components.SingleValue {...props}>
|
|
<span className='flex items-center gap-1'>{props.data.label}</span>
|
|
</components.SingleValue>
|
|
)
|
|
|
|
const LanguageSwitcher: React.FC = () => {
|
|
const { i18n } = useTranslation()
|
|
const [mounted, setMounted] = useState(false)
|
|
const [selected, setSelected] = useState<LanguageOption>(LANGS[0])
|
|
|
|
useEffect(() => {
|
|
const active = LANGS.find((item) => item.value === i18n.language) || LANGS[0]
|
|
setSelected(active)
|
|
setMounted(true)
|
|
}, [i18n.language])
|
|
|
|
const handleChange = (opt: LanguageOption | null) => {
|
|
if (!opt) return
|
|
setSelected(opt)
|
|
i18n.changeLanguage(opt.value)
|
|
}
|
|
|
|
if (!mounted) return null
|
|
|
|
return (
|
|
<div style={{ width: 88 }}>
|
|
<Select
|
|
value={selected}
|
|
options={LANGS}
|
|
onChange={handleChange}
|
|
isSearchable={false}
|
|
menuPlacement='top'
|
|
components={{
|
|
Option,
|
|
SingleValue: SingleVal,
|
|
IndicatorSeparator: () => null,
|
|
}}
|
|
styles={{
|
|
control: (base) => ({
|
|
...base,
|
|
minHeight: 28,
|
|
height: 28,
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
borderColor: '#d1d5db',
|
|
cursor: 'pointer',
|
|
}),
|
|
valueContainer: (base) => ({
|
|
...base,
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
paddingLeft: 6,
|
|
}),
|
|
indicatorsContainer: (base) => ({
|
|
...base,
|
|
height: 24,
|
|
}),
|
|
dropdownIndicator: (base) => ({
|
|
...base,
|
|
padding: 2,
|
|
}),
|
|
option: (base, state) => ({
|
|
...base,
|
|
paddingTop: 4,
|
|
paddingBottom: 4,
|
|
height: 26,
|
|
fontSize: '0.875rem',
|
|
backgroundColor: state.isFocused ? '#f3f4f6' : 'white',
|
|
color: '#111827',
|
|
}),
|
|
menu: (base) => ({
|
|
...base,
|
|
zIndex: 9999,
|
|
}),
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LanguageSwitcher
|