diff options
Diffstat (limited to 'src/components/LanguageSelect.tsx')
-rw-r--r-- | src/components/LanguageSelect.tsx | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/src/components/LanguageSelect.tsx b/src/components/LanguageSelect.tsx new file mode 100644 index 000000000..2ad3949ae --- /dev/null +++ b/src/components/LanguageSelect.tsx @@ -0,0 +1,50 @@ +import React from 'react' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {APP_LANGUAGES} from '#/locale/languages' +import * as Select from '#/components/Select' + +export function LanguageSelect({ + value, + onChange, + items = APP_LANGUAGES.map(l => ({ + label: l.name, + value: l.code2, + })), +}: { + value?: string + onChange: (value: string) => void + items?: {label: string; value: string}[] +}) { + const {_} = useLingui() + + const handleOnChange = React.useCallback( + (value: string) => { + if (!value) return + onChange(sanitizeAppLanguageSetting(value)) + }, + [onChange], + ) + + return ( + <Select.Root + value={value ? sanitizeAppLanguageSetting(value) : undefined} + onValueChange={handleOnChange}> + <Select.Trigger label={_(msg`Select language`)}> + <Select.ValueText placeholder={_(msg`Select language`)} /> + <Select.Icon /> + </Select.Trigger> + <Select.Content + renderItem={({label, value}) => ( + <Select.Item value={value} label={label}> + <Select.ItemIndicator /> + <Select.ItemText>{label}</Select.ItemText> + </Select.Item> + )} + items={items} + /> + </Select.Root> + ) +} |