104 lines
2.3 KiB
TypeScript
104 lines
2.3 KiB
TypeScript
import BottomSheetModal from "@/components/common/BottomSheetModal"; // adjust path
|
|
|
|
import { StyleSheet, Text, TouchableOpacity } from "react-native";
|
|
import { useEffect, useState } from "react";
|
|
import { getLanguage, setLanguage } from "@/services/i18n";
|
|
|
|
interface CustomerSupportProps {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function LanguageModal({
|
|
visible,
|
|
onClose,
|
|
}: CustomerSupportProps) {
|
|
const [selectedLang, setSelectedLang] = useState<"en" | "hi">("en");
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
const lang = await getLanguage();
|
|
setSelectedLang(lang === "hi" ? "hi" : "en");
|
|
})();
|
|
}, []);
|
|
|
|
const handleLanguagePress = (lang: "en" | "hi") => {
|
|
setSelectedLang(lang);
|
|
setLanguage(lang);
|
|
onClose();
|
|
};
|
|
return (
|
|
<BottomSheetModal
|
|
visible={visible}
|
|
onClose={onClose}
|
|
heading="Select Language"
|
|
>
|
|
<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>
|
|
</BottomSheetModal>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
languageText: {
|
|
fontSize: 16,
|
|
color: "#2f465e",
|
|
},
|
|
selectedCard: {
|
|
borderColor: "#009E71",
|
|
},
|
|
languageCard: {
|
|
width: "100%",
|
|
borderWidth: 1,
|
|
borderColor: "#d8dde7",
|
|
borderRadius: 4,
|
|
padding: 16,
|
|
marginBottom: 16,
|
|
justifyContent: "center",
|
|
},
|
|
row: {
|
|
flexDirection: "row",
|
|
gap: 16,
|
|
justifyContent: "space-between",
|
|
},
|
|
secondaryButton: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 16,
|
|
height: 40,
|
|
borderRadius: 4,
|
|
backgroundColor: "#F3F5F8",
|
|
borderWidth: 1,
|
|
borderColor: "#D8DDE7",
|
|
width: 156,
|
|
gap: 8,
|
|
},
|
|
fullButton: {
|
|
width: "100%",
|
|
},
|
|
buttonText: {
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
color: "#252A34",
|
|
},
|
|
});
|