65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import { CachedTranslator, Translator, language_matrix, language_matrix_entry } from "@/app/i18n/api";
|
|
import { LIBRETRANSLATE_BASE_URL } from "@/constants/api";
|
|
import { useEffect, useState } from "react";
|
|
import ISpeakButton from "./ui/ISpeakButton";
|
|
import { LANG_FLAGS } from "@/app/i18n/lang";
|
|
import { ScrollView, StyleSheet, Text, View } from "react-native";
|
|
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
|
|
import { Conversation, Speaker } from "@/app/lib/conversation";
|
|
|
|
|
|
export function LanguageSelection(props: {
|
|
translator?: Translator
|
|
onLanguageSelected?: (language: language_matrix_entry) => any,
|
|
}) {
|
|
const [languages, setLanguages] = useState<language_matrix | undefined>();
|
|
const [languagesLoaded, setLanguagesLoaded] = useState<boolean>(false);
|
|
|
|
const translator = props.translator || new CachedTranslator("en")
|
|
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
// Replace with your actual async data fetching logic
|
|
const languages = await translator.fetchLanguages();
|
|
setLanguages(languages);
|
|
setLanguagesLoaded(true);
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
return (
|
|
<ScrollView >
|
|
<SafeAreaProvider >
|
|
<SafeAreaView>
|
|
{(languages && languagesLoaded) ? Object.entries(languages).filter((l) => (LANG_FLAGS as any)[l[0]] !== undefined).map(
|
|
([lang, lang_entry]) => {
|
|
return (
|
|
<View style={styles.column}>
|
|
<ISpeakButton language={lang_entry} key={lang_entry.code} onLangSelected={props.onLanguageSelected && props.onLanguageSelected(lang_entry)} />
|
|
</View>
|
|
);
|
|
}
|
|
) : <Text>Waiting...</Text>
|
|
}
|
|
</SafeAreaView>
|
|
</SafeAreaProvider>
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
column: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
flexBasis: "auto",
|
|
flexGrow: 1,
|
|
padding: 8,
|
|
},
|
|
}) |