fitst commit

screens/auth/register/RegisterScreen.tsx

@@ -0,0 +1,222 @@
+import AuthHeader from '@/components/ui/AuthHeader';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useRouter } from 'expo-router';
+import { UserPlus } from 'lucide-react-native';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import RegisterForm from './RegisterForm';
+
+export default function RegisterScreen() {
+  const router = useRouter();
+  const { t } = useTranslation();
+
+  return (
+    <View style={styles.container}>
+      {/* Background Decorations */}
+      <LinearGradient
+        colors={['#0f172a', '#1e293b', '#334155']}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={StyleSheet.absoluteFill}
+      />
+      <View style={styles.decorCircle1} />
+      <View style={styles.decorCircle2} />
+
+      <AuthHeader />
+      <SafeAreaView style={{ flex: 1 }}>
+        <ScrollView
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+        >
+          {/* Header Section */}
+          <View style={styles.header}>
+            <View style={styles.iconContainer}>
+              <LinearGradient
+                colors={['#10b981', '#059669']}
+                style={styles.iconGradient}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 1 }}
+              >
+                <UserPlus size={32} color="#ffffff" />
+              </LinearGradient>
+            </View>
+            <Text style={styles.title}>{t("Ro'yxatdan o'tish")}</Text>
+            <Text style={styles.subtitle}>
+              {t('Tizimdan foydalanish uchun STIR raqami yoki JSHSHR kiritishingiz kerak.')}
+            </Text>
+          </View>
+
+          {/* Form Card */}
+          <View style={styles.card}>
+            <RegisterForm />
+          </View>
+
+          {/* Footer */}
+          <View style={styles.footer}>
+            <TouchableOpacity onPress={() => router.push('/')}>
+              <Text style={styles.footerText}>
+                {t('Hisobingiz bormi?')} <Text style={styles.footerLink}>{t('Kirish')}</Text>
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#0f172a' },
+
+  // Header Navigatsiya qismi (LoginScreen kabi)
+  languageHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    zIndex: 1000,
+  },
+  backButton: {
+    width: 44,
+    height: 44,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.15)',
+  },
+  languageButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.15)',
+  },
+  languageText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#94a3b8',
+  },
+
+  // Scroll va Forma joylashuvi
+  scrollContent: {
+    flexGrow: 1,
+    paddingHorizontal: 24,
+    paddingBottom: 40,
+    paddingTop: 10,
+    justifyContent: 'center',
+  },
+
+  header: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  iconContainer: {
+    marginBottom: 20,
+  },
+  iconGradient: {
+    width: 72,
+    height: 72,
+    borderRadius: 22,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#10b981',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '800',
+    color: '#ffffff',
+    marginBottom: 10,
+    letterSpacing: 0.5,
+  },
+  subtitle: {
+    fontSize: 15,
+    color: '#94a3b8',
+    textAlign: 'center',
+    lineHeight: 22,
+    paddingHorizontal: 10,
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 28,
+    padding: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.3,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+
+  // Dropdown (LoginScreen bilan bir xil)
+  dropdown: {
+    position: 'absolute',
+    top: 55,
+    right: 0,
+    backgroundColor: '#ffffff',
+    borderRadius: 16,
+    padding: 8,
+    minWidth: 180,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.2,
+    shadowRadius: 20,
+    elevation: 15,
+    borderWidth: 1,
+    borderColor: '#f1f5f9',
+  },
+  dropdownOption: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 4,
+  },
+  dropdownOptionActive: { backgroundColor: '#eff6ff' },
+  dropdownOptionText: { fontSize: 14, fontWeight: '600', color: '#475569' },
+  dropdownOptionTextActive: { color: '#3b82f6' },
+  checkmark: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: '#3b82f6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkmarkText: { color: '#ffffff', fontSize: 12, fontWeight: 'bold' },
+
+  footer: { marginTop: 24, alignItems: 'center' },
+  footerText: { color: '#94a3b8', fontSize: 14 },
+  footerLink: { color: '#3b82f6', fontWeight: '700' },
+  decorCircle1: {
+    position: 'absolute',
+    top: -150,
+    right: -100,
+    width: 400,
+    height: 400,
+    borderRadius: 200,
+    backgroundColor: 'rgba(59, 130, 246, 0.1)',
+  },
+  decorCircle2: {
+    position: 'absolute',
+    bottom: -100,
+    left: -150,
+    width: 350,
+    height: 350,
+    borderRadius: 175,
+    backgroundColor: 'rgba(16, 185, 129, 0.08)',
+  },
+});