61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { Pressable, Text, View } from 'react-native';
|
|
import { TTS_PROVIDER_LABEL, type TtsProvider, useTtsProvider } from '../../lib/ttsProvider';
|
|
|
|
const PROVIDERS: TtsProvider[] = ['openai', 'gemini', 'google-cloud'];
|
|
|
|
export function TtsProviderToggle() {
|
|
const [current, set] = useTtsProvider();
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 6,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 9,
|
|
color: '#9ca3af',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.5,
|
|
marginRight: 4,
|
|
}}
|
|
>
|
|
TTS
|
|
</Text>
|
|
{PROVIDERS.map((p) => {
|
|
const active = p === current;
|
|
return (
|
|
<Pressable
|
|
key={p}
|
|
onPress={() => { void set(p); }}
|
|
hitSlop={6}
|
|
style={{
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 4,
|
|
borderRadius: 999,
|
|
backgroundColor: active ? '#1f2937' : '#f9fafb',
|
|
borderWidth: 1,
|
|
borderColor: active ? '#1f2937' : '#e5e7eb',
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
fontFamily: 'Nunito_700Bold',
|
|
color: active ? '#ffffff' : '#6b7280',
|
|
}}
|
|
>
|
|
{TTS_PROVIDER_LABEL[p]}
|
|
</Text>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
}
|