128 lines
3.1 KiB
TypeScript
128 lines
3.1 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
|
|
import { setLanguage } from "../../services/i18n/index";
|
|
import { useRouter, useNavigation } from "expo-router";
|
|
import { StatusBar } from "expo-status-bar";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
|
|
const LanguageScreen = () => {
|
|
const router = useRouter();
|
|
const navigation = useNavigation();
|
|
const [selectedLang, setSelectedLang] = useState<string | null>(null);
|
|
const insets = useSafeAreaInsets();
|
|
|
|
useEffect(() => {
|
|
navigation.setOptions({ headerShown: false });
|
|
}, [navigation]);
|
|
|
|
const handleLanguagePress = (lang: string) => {
|
|
setSelectedLang(lang);
|
|
};
|
|
|
|
const handleSelect = async () => {
|
|
if (selectedLang) {
|
|
await setLanguage(selectedLang);
|
|
router.navigate("/auth/login");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<StatusBar style="dark" />
|
|
<View style={styles.container}>
|
|
<Text style={styles.title}>Select Language</Text>
|
|
<Text style={styles.subtitle}>
|
|
Please select your preferred language
|
|
</Text>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.languageCard,
|
|
selectedLang === "en" && styles.selectedCard,
|
|
]}
|
|
onPress={() => handleLanguagePress("en")}
|
|
>
|
|
<Text style={styles.languageText}>English</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.languageCard,
|
|
selectedLang === "hi" && styles.selectedCard,
|
|
]}
|
|
onPress={() => handleLanguagePress("hi")}
|
|
>
|
|
<Text style={styles.languageText}>हिन्दी</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.selectButton,
|
|
selectedLang ? styles.selectEnabled : styles.selectDisabled,
|
|
{ marginBottom: insets.bottom + 16 },
|
|
]}
|
|
onPress={handleSelect}
|
|
disabled={!selectedLang}
|
|
>
|
|
<Text style={styles.selectButtonText}>Select</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#f3f5f8",
|
|
paddingTop: 108,
|
|
paddingHorizontal: 16,
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: "600",
|
|
color: "#1a1c1e",
|
|
marginBottom: 8,
|
|
},
|
|
subtitle: {
|
|
fontSize: 14,
|
|
color: "#252a34",
|
|
marginBottom: 24,
|
|
},
|
|
languageCard: {
|
|
width: "100%",
|
|
borderWidth: 1,
|
|
borderColor: "#d8dde7",
|
|
borderRadius: 4,
|
|
padding: 16,
|
|
marginBottom: 16,
|
|
justifyContent: "center",
|
|
},
|
|
selectedCard: {
|
|
borderColor: "#009E71",
|
|
},
|
|
languageText: {
|
|
fontSize: 16,
|
|
color: "#2f465e",
|
|
},
|
|
selectButton: {
|
|
marginTop: 16,
|
|
padding: 16,
|
|
borderRadius: 4,
|
|
alignItems: "center",
|
|
},
|
|
selectDisabled: {
|
|
backgroundColor: "#b0b7c5",
|
|
},
|
|
selectEnabled: {
|
|
backgroundColor: "#008000",
|
|
},
|
|
selectButtonText: {
|
|
color: "#fdfdfd",
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
},
|
|
});
|
|
|
|
export default LanguageScreen;
|