Spaces:
Sleeping
Sleeping
File size: 1,866 Bytes
e327f0d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import React from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { colors, radius, spacing, typography } from '../theme';
import { changeLanguage, SupportedLocale } from '../i18n';
interface Props {
compact?: boolean;
}
export default function LanguageSwitcher({ compact }: Props) {
const { i18n, t } = useTranslation('common');
const set = async (locale: SupportedLocale) => {
await changeLanguage(locale);
};
const current = (i18n.language || 'tr').toLowerCase().startsWith('en') ? 'en' : 'tr';
return (
<View style={[styles.wrap, compact && styles.wrapCompact]}>
<Pressable
accessibilityRole="button"
onPress={() => set('tr')}
style={[styles.btn, current === 'tr' && styles.btnActive]}
>
<Text style={[styles.text, current === 'tr' && styles.textActive]}>
{compact ? 'TR' : t('languageTr')}
</Text>
</Pressable>
<Pressable
accessibilityRole="button"
onPress={() => set('en')}
style={[styles.btn, current === 'en' && styles.btnActive]}
>
<Text style={[styles.text, current === 'en' && styles.textActive]}>
{compact ? 'EN' : t('languageEn')}
</Text>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
wrap: {
flexDirection: 'row',
backgroundColor: colors.bgElevated,
borderRadius: radius.pill,
padding: 4,
alignSelf: 'flex-start',
},
wrapCompact: {
padding: 2,
},
btn: {
paddingVertical: spacing.xs,
paddingHorizontal: spacing.md,
borderRadius: radius.pill,
},
btnActive: {
backgroundColor: colors.primary,
},
text: {
...typography.caption,
color: colors.textMuted,
fontWeight: '600',
},
textActive: {
color: '#fff',
},
});
|