81 lines
3.6 KiB
TypeScript
81 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
|
import { router } from 'expo-router';
|
|
import Animated, { FadeInDown, FadeInUp } from 'react-native-reanimated';
|
|
import { COLORS, SPACING, TYPOGRAPHY, BORDER_RADIUS, SHADOWS } from '../constants/theme';
|
|
import { useLanguage } from '../stores/LanguageContext';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { Languages, Scissors } from 'lucide-react-native';
|
|
|
|
export default function RootLanguageSelection() {
|
|
const { setLanguage } = useLanguage();
|
|
|
|
const handleSelect = (lang: 'pt' | 'es') => {
|
|
setLanguage(lang);
|
|
router.replace('/landing');
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<View style={styles.content}>
|
|
<Animated.View entering={FadeInDown.duration(800)} style={styles.logoContainer}>
|
|
<View style={styles.logoCircle}>
|
|
<Scissors color={COLORS.primary} size={40} />
|
|
</View>
|
|
<Text style={styles.brandName}>BarberFlow</Text>
|
|
</Animated.View>
|
|
|
|
<Animated.View entering={FadeInDown.delay(200).duration(600)} style={styles.header}>
|
|
<Text style={styles.title}>Selecione seu idioma</Text>
|
|
<Text style={styles.subtitle}>Seleccione su idioma para continuar</Text>
|
|
</Animated.View>
|
|
|
|
<View style={styles.options}>
|
|
<Animated.View entering={FadeInUp.delay(400)}>
|
|
<TouchableOpacity
|
|
style={styles.langCard}
|
|
onPress={() => handleSelect('pt')}
|
|
>
|
|
<Text style={styles.flag}>🇧🇷</Text>
|
|
<View style={styles.langInfo}>
|
|
<Text style={styles.langName}>Português</Text>
|
|
<Text style={styles.langDesc}>Bem-vindo ao sistema</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
|
|
<Animated.View entering={FadeInUp.delay(500)}>
|
|
<TouchableOpacity
|
|
style={styles.langCard}
|
|
onPress={() => handleSelect('es')}
|
|
>
|
|
<Text style={styles.flag}>🇪🇸</Text>
|
|
<View style={styles.langInfo}>
|
|
<Text style={styles.langName}>Español</Text>
|
|
<Text style={styles.langDesc}>Bienvenido al sistema</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
</View>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: COLORS.background },
|
|
content: { flex: 1, padding: SPACING.xl, justifyContent: 'center', maxWidth: 500, width: '100%', alignSelf: 'center' },
|
|
logoContainer: { alignItems: 'center', marginBottom: SPACING.xxxl },
|
|
logoCircle: { width: 80, height: 80, borderRadius: 40, backgroundColor: `${COLORS.primary}15`, alignItems: 'center', justifyContent: 'center', marginBottom: SPACING.md, borderWidth: 1, borderColor: COLORS.primary },
|
|
brandName: { ...TYPOGRAPHY.h1, color: COLORS.text, letterSpacing: 2 },
|
|
header: { alignItems: 'center', marginBottom: SPACING.xxl },
|
|
title: { ...TYPOGRAPHY.h2, color: COLORS.text, marginBottom: 8 },
|
|
subtitle: { ...TYPOGRAPHY.body, color: COLORS.textMuted },
|
|
options: { gap: SPACING.md },
|
|
langCard: { flexDirection: 'row', alignItems: 'center', padding: SPACING.xl, backgroundColor: COLORS.surface, borderRadius: BORDER_RADIUS.xl, borderWidth: 1, borderColor: COLORS.divider, ...(SHADOWS.medium as any) },
|
|
flag: { fontSize: 32, marginRight: SPACING.lg },
|
|
langInfo: { flex: 1 },
|
|
langName: { ...TYPOGRAPHY.h3, color: COLORS.text },
|
|
langDesc: { ...TYPOGRAPHY.caption, color: COLORS.textMuted }
|
|
});
|