Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫
Something went wrong. Try again.
2.8 kB · 85 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586import {useCallback} from 'react'import {msg} from '@lingui/core/macro'import {useLingui} from '@lingui/react'import {useQueryClient} from '@tanstack/react-query'
import {sanitizeAppLanguageSetting} from '#/locale/helpers'import {APP_LANGUAGES} from '#/locale/languages'import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'import {resetPostsFeedQueries} from '#/state/queries/post-feed'import {atoms as a, platform, useTheme, web} from '#/alf'import * as Select from '#/components/Select'import {Button, ButtonIcon} from './Button'import {Earth_Stroke2_Corner2_Rounded as EarthIcon} from './icons/Globe'
export function AppLanguageDropdown() { const t = useTheme() const {_} = useLingui()
const queryClient = useQueryClient() const langPrefs = useLanguagePrefs() const setLangPrefs = useLanguagePrefsApi() const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage)
const onChangeAppLanguage = useCallback( (value: string) => { if (!value) return if (sanitizedLang !== value) { setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value)) }
// reset feeds to refetch content resetPostsFeedQueries(queryClient) }, [sanitizedLang, setLangPrefs, queryClient], )
return ( <Select.Root value={sanitizeAppLanguageSetting(langPrefs.appLanguage)} onValueChange={onChangeAppLanguage}> <Select.Trigger label={_(msg`Change app language`)}> {({props}) => ( <Button {...props} label={props.accessibilityLabel} size={platform({ web: 'tiny', native: 'small', })} variant="ghost" color="secondary" shape="rectangular" style={[ a.pr_xs, a.pl_sm, platform({ web: [{alignSelf: 'flex-start'}, a.gap_sm], native: [a.gap_xs], }), ]}> <ButtonIcon icon={EarthIcon} size="md" /> <Select.ValueText placeholder={_(msg`Select an app language`)} style={[t.atoms.text_contrast_medium]} /> <Select.Icon style={[t.atoms.text_contrast_medium]} /> </Button> )} </Select.Trigger> <Select.Content label={_(msg`Select language`)} renderItem={({label, value}) => ( <Select.Item value={value} label={label} style={web([a.pointer])}> <Select.ItemIndicator /> <Select.ItemText>{label}</Select.ItemText> </Select.Item> )} items={APP_LANGUAGES.map(l => ({ label: l.name, value: l.code2, }))} /> </Select.Root> )}