fitst commit
This commit is contained in:
Samandar Turgunboyev
282
screens/auth/login/ui/LoginScreens.tsx
Normal file
282
screens/auth/login/ui/LoginScreens.tsx
Normal file
@@ -0,0 +1,282 @@
|
||||
import AuthHeader from '@/components/ui/AuthHeader';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Phone, UserPlus } from 'lucide-react-native';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import LoginForm from './LoginForm';
|
||||
|
||||
export default function LoginScreen() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<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 back={false} />
|
||||
<View style={styles.scrollContent}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<View style={styles.iconContainer}>
|
||||
<LinearGradient
|
||||
colors={['#3b82f6', '#2563eb']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.iconGradient}
|
||||
>
|
||||
<Phone size={32} color="#ffffff" strokeWidth={2} />
|
||||
</LinearGradient>
|
||||
</View>
|
||||
|
||||
<Text style={styles.title}>{t('Kirish')}</Text>
|
||||
<Text style={styles.subtitle}>{t('Davom etish uchun tizimga kiring')}</Text>
|
||||
</View>
|
||||
|
||||
{/* Login Form */}
|
||||
<View style={styles.card}>
|
||||
<LoginForm />
|
||||
</View>
|
||||
|
||||
{/* Register bo'limi */}
|
||||
<View style={styles.registerSection}>
|
||||
<View style={styles.dividerContainer}>
|
||||
<View style={styles.divider} />
|
||||
<Text style={styles.dividerText}>{t('YOKI')}</Text>
|
||||
<View style={styles.divider} />
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.registerButton}
|
||||
onPress={() => router.push('/register')}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['rgba(59, 130, 246, 0.1)', 'rgba(37, 99, 235, 0.15)']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.registerGradient}
|
||||
>
|
||||
<View style={styles.registerIconContainer}>
|
||||
<UserPlus size={20} color="#3b82f6" strokeWidth={2.5} />
|
||||
</View>
|
||||
<View style={styles.registerTextContainer}>
|
||||
<Text style={styles.registerTitle}>{t("Hisobingiz yo'qmi?")}</Text>
|
||||
<Text style={styles.registerSubtitle}>{t("Ro'yxatdan o'tish")}</Text>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#0f172a',
|
||||
},
|
||||
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)',
|
||||
},
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
paddingHorizontal: 24,
|
||||
paddingBottom: 40,
|
||||
paddingTop: 10,
|
||||
},
|
||||
languageHeader: {
|
||||
alignItems: 'flex-end',
|
||||
marginBottom: 24,
|
||||
position: 'relative',
|
||||
zIndex: 1000,
|
||||
},
|
||||
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.2)',
|
||||
},
|
||||
languageText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#94a3b8',
|
||||
},
|
||||
header: {
|
||||
alignItems: 'center',
|
||||
marginTop: 20,
|
||||
marginBottom: 40,
|
||||
},
|
||||
iconContainer: {
|
||||
marginBottom: 24,
|
||||
},
|
||||
iconGradient: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#3b82f6',
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 16,
|
||||
elevation: 8,
|
||||
},
|
||||
title: {
|
||||
fontSize: 32,
|
||||
fontWeight: '800',
|
||||
color: '#ffffff',
|
||||
marginBottom: 12,
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 15,
|
||||
color: '#94a3b8',
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 24,
|
||||
padding: 24,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 20,
|
||||
elevation: 10,
|
||||
},
|
||||
registerSection: {
|
||||
marginTop: 32,
|
||||
},
|
||||
dividerContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
divider: {
|
||||
flex: 1,
|
||||
height: 1,
|
||||
backgroundColor: 'rgba(148, 163, 184, 0.3)',
|
||||
},
|
||||
dividerText: {
|
||||
marginHorizontal: 16,
|
||||
fontSize: 13,
|
||||
color: '#94a3b8',
|
||||
fontWeight: '600',
|
||||
},
|
||||
registerButton: {
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
registerGradient: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 20,
|
||||
borderWidth: 1.5,
|
||||
borderColor: 'rgba(59, 130, 246, 0.3)',
|
||||
borderRadius: 16,
|
||||
},
|
||||
registerIconContainer: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 12,
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.15)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 14,
|
||||
},
|
||||
registerTextContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
registerTitle: {
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
color: '#e2e8f0',
|
||||
marginBottom: 3,
|
||||
},
|
||||
registerSubtitle: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
color: '#3b82f6',
|
||||
},
|
||||
dropdown: {
|
||||
position: 'absolute',
|
||||
top: 50,
|
||||
right: 0,
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 12,
|
||||
padding: 8,
|
||||
minWidth: 160,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 12,
|
||||
elevation: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
},
|
||||
dropdownOption: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 8,
|
||||
marginBottom: 4,
|
||||
},
|
||||
dropdownOptionActive: {
|
||||
backgroundColor: '#e0e7ff',
|
||||
},
|
||||
dropdownOptionText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#475569',
|
||||
},
|
||||
dropdownOptionTextActive: {
|
||||
color: '#3b82f6',
|
||||
},
|
||||
checkmark: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#3b82f6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
checkmarkText: {
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user