fitst commit

2026-01-28 18:26:50 +05:00
parent 166a55b1e9
commit 124798419b
196 changed files with 26627 additions and 421 deletions
--- a/app/profile/settings.tsx
+++ b/app/profile/settings.tsx
@@ -0,0 +1,166 @@
+import GB from '@/assets/images/GB.png';
+import RU from '@/assets/images/RU.png';
+import UZ from '@/assets/images/UZ.png';
+import { useTheme } from '@/components/ThemeContext';
+import { saveLang } from '@/hooks/storage.native';
+import { useLanguage } from '@/i18n/useLanguage';
+import { useQueryClient } from '@tanstack/react-query';
+import { Image } from 'expo-image';
+import { useRouter } from 'expo-router';
+import { ChevronLeft, Moon, Sun } from 'lucide-react-native';
+import { useTranslation } from 'react-i18next';
+import { Pressable, ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function SettingsScreen() {
+  const router = useRouter();
+  const { language, changeLanguage } = useLanguage();
+  const { t, i18n } = useTranslation();
+  const queryClient = useQueryClient();
+
+  const selectLanguage = async (lang: string) => {
+    changeLanguage(lang as 'uz' | 'ru' | 'en');
+    await i18n.changeLanguage(lang);
+    queryClient.invalidateQueries();
+    await saveLang(lang);
+  };
+  const { isDark, toggleTheme } = useTheme();
+
+  const languages = [
+    { code: 'uz', label: "O'zbek", icon: UZ },
+    { code: 'ru', label: 'Русский', icon: RU },
+    { code: 'en', label: 'English', icon: GB },
+  ];
+
+  return (
+    <SafeAreaView style={[styles.container, isDark ? styles.darkBg : styles.lightBg]}>
+      <ScrollView contentContainerStyle={{ paddingBottom: 32 }}>
+        {/* Header */}
+        <View style={styles.header}>
+          <Pressable onPress={() => router.back()}>
+            <ChevronLeft size={26} color={isDark ? '#f8fafc' : '#0f172a'} />
+          </Pressable>
+
+          <Text style={[styles.headerTitle, isDark ? styles.darkText : styles.lightText]}>
+            {t('Sozlamalar')}
+          </Text>
+
+          <View style={{ width: 26 }} />
+        </View>
+
+        {/* Language Cards */}
+        <Text style={[styles.sectionTitle, isDark ? styles.darkText : styles.lightText]}>
+          {t('Tilni tanlang')}
+        </Text>
+        {languages.map((lang) => {
+          const active = language === lang.code;
+          return (
+            <Pressable
+              key={lang.code}
+              onPress={() => selectLanguage(lang.code)}
+              style={[
+                styles.langCard,
+                isDark ? styles.darkCard : styles.lightCard,
+                active && styles.langActiveCard,
+              ]}
+            >
+              <View style={styles.row}>
+                <Image source={lang.icon} style={{ width: 32, height: 24 }} />
+                <Text
+                  style={[
+                    styles.label,
+                    isDark ? styles.darkText : styles.lightText,
+                    active && { color: '#fff' },
+                  ]}
+                >
+                  {lang.label}
+                </Text>
+              </View>
+            </Pressable>
+          );
+        })}
+
+        {/* Theme */}
+        <View style={{ marginTop: 10 }}>
+          <Text style={[styles.sectionTitle, isDark ? styles.darkText : styles.lightText]}>
+            {t('Rejimni tanlang')}
+          </Text>
+          <View style={[styles.card, isDark ? styles.darkCard : styles.lightCard]}>
+            <View style={styles.row}>
+              {isDark ? <Moon size={22} color="#818cf8" /> : <Sun size={22} color="#f59e0b" />}
+              <Text style={[styles.label, isDark ? styles.darkText : styles.lightText]}>
+                {isDark ? t('Tungi rejim') : t("Yorug' rejim")}
+              </Text>
+            </View>
+
+            <Switch
+              value={isDark}
+              onValueChange={toggleTheme}
+              trackColor={{ false: '#d1d5db', true: '#6366f1' }}
+              thumbColor={isDark ? '#e5e7eb' : '#ffffff'}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+
+  /* Backgrounds */
+  lightBg: { backgroundColor: '#f9fafb' },
+  darkBg: { backgroundColor: '#0f172a' },
+
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 16,
+  },
+
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    paddingHorizontal: 16,
+    marginBottom: 8,
+  },
+
+  card: {
+    borderRadius: 14,
+    padding: 16,
+    marginHorizontal: 16,
+    marginVertical: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
+  lightCard: { backgroundColor: '#ffffff' },
+  darkCard: { backgroundColor: '#1e293b', borderWidth: 1, borderColor: '#334155' },
+
+  row: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+
+  label: { fontSize: 15, fontWeight: '500' },
+  darkText: { color: '#f8fafc' },
+  lightText: { color: '#0f172a' },
+
+  /* Language Cards */
+  langCard: {
+    borderRadius: 14,
+    padding: 16,
+    marginHorizontal: 16,
+    marginVertical: 6,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  langActiveCard: { backgroundColor: '#3b82f6' },
+});