auto-commit for 41105da3-9f0d-4402-a0a9-c2549b25098b

2026-07-21 18:15:39 +00:00 · 2025-11-08 22:45:28 +00:00
parent f266aada2c
commit cd8a6a89c8
2 changed files with 459 additions and 0 deletions
@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  Alert,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const LANGUAGES = [
+  { code: 'en', name: 'English', nativeName: 'English', flag: '🇺🇸' },
+  { code: 'ku-sorani', name: 'Kurdish Sorani', nativeName: 'کوردی سۆرانی', flag: '🟥' },
+  { code: 'ku-kurmanji', name: 'Kurdish Kurmanji', nativeName: 'Kurdî Kurmancî', flag: '🟨' },
+  { code: 'ar', name: 'Arabic', nativeName: 'العربية', flag: '🇸🇦' },
+  { code: 'tr', name: 'Turkish', nativeName: 'Türkçe', flag: '🇹🇷' },
+  { code: 'fa', name: 'Persian', nativeName: 'فارسی', flag: '🇮🇷' },
+];
+
+export default function LanguageSettingsScreen({ navigation }: any) {
+  const insets = useSafeAreaInsets();
+  const [selectedLanguage, setSelectedLanguage] = useState('en');
+
+  const handleLanguageChange = (languageCode: string) => {
+    setSelectedLanguage(languageCode);
+    // TODO: Save to backend and apply i18n
+    Alert.alert(
+      'Language Changed',
+      'Language preference has been saved. Full translation will be available in the next update.',
+      [
+        {
+          text: 'OK',
+          onPress: () => navigation.goBack(),
+        },
+      ]
+    );
+  };
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
+          <Ionicons name="arrow-back" size={24} color="#1F2937" />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Language</Text>
+        <View style={{ width: 40 }} />
+      </View>
+
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        <View style={styles.infoBox}>
+          <Ionicons name="globe-outline" size={20} color="#3B82F6" />
+          <Text style={styles.infoText}>
+            6 languages fully supported. Other languages use Google Translator.
+          </Text>
+        </View>
+
+        {LANGUAGES.map((language) => (
+          <TouchableOpacity
+            key={language.code}
+            style={[
+              styles.languageCard,
+              selectedLanguage === language.code && styles.languageCardSelected,
+            ]}
+            onPress={() => handleLanguageChange(language.code)}
+          >
+            <View style={styles.languageCardLeft}>
+              <Text style={styles.flag}>{language.flag}</Text>
+              <View style={styles.languageInfo}>
+                <Text style={styles.languageName}>{language.name}</Text>
+                <Text style={styles.languageNative}>{language.nativeName}</Text>
+              </View>
+            </View>
+            {selectedLanguage === language.code && (
+              <Ionicons name="checkmark-circle" size={24} color="#EE2A35" />
+            )}
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F8F9FA',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    backgroundColor: '#FFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#F3F4F6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#1F2937',
+  },
+  scrollContent: {
+    padding: 16,
+    paddingBottom: 80,
+  },
+  infoBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#DBEAFE',
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  infoText: {
+    fontSize: 14,
+    color: '#1E40AF',
+    marginLeft: 8,
+    flex: 1,
+  },
+  languageCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#FFF',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    borderWidth: 2,
+    borderColor: '#E5E7EB',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  languageCardSelected: {
+    borderColor: '#EE2A35',
+    backgroundColor: '#FEE2E2',
+  },
+  languageCardLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  flag: {
+    fontSize: 32,
+    marginRight: 12,
+  },
+  languageInfo: {
+    flex: 1,
+  },
+  languageName: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 2,
+  },
+  languageNative: {
+    fontSize: 14,
+    color: '#6B7280',
+  },
+});