update register page ui and api
This commit is contained in:
Samandar Turgunboyev
@@ -1,21 +1,247 @@
|
||||
import RegisterScreen from '@/screens/auth/register/RegisterScreen';
|
||||
import AuthHeader from '@/components/ui/AuthHeader';
|
||||
import { PersonType, useRegister } from '@/screens/auth/register/lib/useRegisterStore';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Building2, ChevronRight, ShieldCheck, User } from 'lucide-react-native';
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, View } from 'react-native';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Animated,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
|
||||
const PERSON_TYPES: {
|
||||
key: PersonType;
|
||||
label: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
gradient: [string, string];
|
||||
}[] = [
|
||||
{
|
||||
key: 'legal_entity',
|
||||
label: 'Yuridik shaxs',
|
||||
description: "Tashkilot yoki korxona",
|
||||
icon: <Building2 size={28} color="#fff" />,
|
||||
gradient: ['#f59e0b', '#d97706'],
|
||||
},
|
||||
{
|
||||
key: 'yatt',
|
||||
label: 'YATT',
|
||||
description: "Yakka tartibdagi tadbirkor",
|
||||
icon: <User size={28} color="#fff" />,
|
||||
gradient: ['#10b981', '#059669'],
|
||||
},
|
||||
{
|
||||
key: 'band',
|
||||
label: "O'zini o'zi band qilgan",
|
||||
description: "O'z faoliyatini mustaqil yurituvchi",
|
||||
icon: <ShieldCheck size={28} color="#fff" />,
|
||||
gradient: ['#3b82f6', '#2563eb'],
|
||||
},
|
||||
];
|
||||
|
||||
function TypeCard({
|
||||
item,
|
||||
index,
|
||||
onPress,
|
||||
}: {
|
||||
item: (typeof PERSON_TYPES)[number];
|
||||
index: number;
|
||||
onPress: () => void;
|
||||
}) {
|
||||
const scale = React.useRef(new Animated.Value(1)).current;
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handlePressIn = () => {
|
||||
Animated.spring(scale, {
|
||||
toValue: 0.96,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
};
|
||||
|
||||
const handlePressOut = () => {
|
||||
Animated.spring(scale, {
|
||||
toValue: 1,
|
||||
friction: 4,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
};
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<View style={styles.safeArea}>
|
||||
<ScrollView
|
||||
contentContainerStyle={{ flexGrow: 1 }}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
showsVerticalScrollIndicator={false}
|
||||
<Animated.View style={{ transform: [{ scale }], marginBottom: 14 }}>
|
||||
<TouchableOpacity
|
||||
style={styles.card}
|
||||
onPress={onPress}
|
||||
onPressIn={handlePressIn}
|
||||
onPressOut={handlePressOut}
|
||||
activeOpacity={1}
|
||||
testID={`person-type-${item.key}`}
|
||||
>
|
||||
<RegisterScreen />
|
||||
</ScrollView>
|
||||
<LinearGradient
|
||||
colors={item.gradient}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.cardIcon}
|
||||
>
|
||||
{item.icon}
|
||||
</LinearGradient>
|
||||
<View style={styles.cardContent}>
|
||||
<Text style={styles.cardTitle}>{t(item.label)}</Text>
|
||||
<Text style={styles.cardDescription}>{t(item.description)}</Text>
|
||||
</View>
|
||||
<ChevronRight size={20} color="#94a3b8" />
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PersonTypeScreen() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
const { setPersonType, reset } = useRegister();
|
||||
|
||||
const handleSelect = (type: PersonType) => {
|
||||
setPersonType(type);
|
||||
router.push('/(auth)/register-form');
|
||||
};
|
||||
|
||||
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 />
|
||||
<SafeAreaView style={styles.safeArea}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>{t("Ro'yxatdan o'tish")}</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
{t("Faoliyat turingizni tanlang")}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.cardList} showsVerticalScrollIndicator={false}>
|
||||
{PERSON_TYPES.map((item, index) => (
|
||||
<TypeCard
|
||||
key={item.key}
|
||||
item={item}
|
||||
index={index}
|
||||
onPress={() => { handleSelect(item.key); reset() }}
|
||||
/>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity onPress={() => router.back()} testID="go-to-login">
|
||||
<Text style={styles.footerText}>
|
||||
{t("Hisobingiz bormi?")} <Text style={styles.footerLink}>{t("Kirish")}</Text>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safeArea: { flex: 1, backgroundColor: '#0f172a' },
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#0f172a',
|
||||
},
|
||||
safeArea: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
header: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
marginTop: 20,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: '800' as const,
|
||||
color: '#ffffff',
|
||||
marginBottom: 10,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 15,
|
||||
color: '#94a3b8',
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
},
|
||||
cardList: {
|
||||
marginBottom: 14,
|
||||
},
|
||||
card: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.06)',
|
||||
borderRadius: 20,
|
||||
padding: 18,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
gap: 16,
|
||||
},
|
||||
cardIcon: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
cardContent: {
|
||||
flex: 1,
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: 17,
|
||||
fontWeight: '700' as const,
|
||||
color: '#ffffff',
|
||||
marginBottom: 4,
|
||||
},
|
||||
cardDescription: {
|
||||
fontSize: 13,
|
||||
color: '#94a3b8',
|
||||
lineHeight: 18,
|
||||
},
|
||||
footer: {
|
||||
marginTop: 'auto' as const,
|
||||
paddingBottom: 20,
|
||||
alignItems: 'center',
|
||||
},
|
||||
footerText: {
|
||||
color: '#94a3b8',
|
||||
fontSize: 14,
|
||||
},
|
||||
footerLink: {
|
||||
color: '#3b82f6',
|
||||
fontWeight: '700' as const,
|
||||
},
|
||||
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)',
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user