97 lines
4.3 KiB
TypeScript
97 lines
4.3 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
|
|
import { router, useLocalSearchParams } 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 { useBarbearia } from '../../stores/BarbeariaContext';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { Scissors, Languages } from 'lucide-react-native';
|
|
|
|
export default function TenantLanguageSelection() {
|
|
const { setLanguage, t } = useLanguage();
|
|
const { barbearia, isLoading } = useBarbearia();
|
|
const { slug } = useLocalSearchParams();
|
|
|
|
const handleSelect = (lang: 'pt' | 'es') => {
|
|
setLanguage(lang);
|
|
router.push(`/${slug}/(auth)/login`);
|
|
};
|
|
|
|
if (isLoading) return null;
|
|
|
|
const colors = barbearia?.colors || COLORS;
|
|
|
|
return (
|
|
<SafeAreaView style={[styles.container, { backgroundColor: colors.background }]}>
|
|
<View style={styles.content}>
|
|
|
|
{/* Logo da Barbearia */}
|
|
<Animated.View entering={FadeInDown.duration(800)} style={styles.logoContainer}>
|
|
<View style={[styles.logoCircle, { backgroundColor: colors.surface, borderColor: colors.primary }]}>
|
|
{barbearia?.logo ? (
|
|
<Image source={{ uri: barbearia.logo }} style={styles.logoImage} />
|
|
) : (
|
|
<Scissors color={colors.primary} size={40} />
|
|
)}
|
|
</View>
|
|
<Text style={[styles.brandName, { color: colors.text }]}>
|
|
{barbearia?.nome || "BarberFlow"}
|
|
</Text>
|
|
</Animated.View>
|
|
|
|
<Animated.View entering={FadeInDown.delay(200)} style={styles.header}>
|
|
<Text style={[styles.title, { color: colors.text }]}>Selecione seu idioma</Text>
|
|
<Text style={[styles.subtitle, { color: colors.textMuted }]}>Como deseja continuar?</Text>
|
|
</Animated.View>
|
|
|
|
<View style={styles.options}>
|
|
<Animated.View entering={FadeInUp.delay(400)}>
|
|
<TouchableOpacity
|
|
style={[styles.langCard, { backgroundColor: colors.surface, borderColor: colors.divider }]}
|
|
onPress={() => handleSelect('pt')}
|
|
>
|
|
<Text style={styles.flag}>🇧🇷</Text>
|
|
<View style={styles.langInfo}>
|
|
<Text style={[styles.langName, { color: colors.text }]}>Português</Text>
|
|
<Text style={[styles.langDesc, { color: colors.textMuted }]}>Preços em Real (R$)</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
|
|
<Animated.View entering={FadeInUp.delay(500)}>
|
|
<TouchableOpacity
|
|
style={[styles.langCard, { backgroundColor: colors.surface, borderColor: colors.divider }]}
|
|
onPress={() => handleSelect('es')}
|
|
>
|
|
<Text style={styles.flag}>🇪🇸</Text>
|
|
<View style={styles.langInfo}>
|
|
<Text style={[styles.langName, { color: colors.text }]}>Español</Text>
|
|
<Text style={[styles.langDesc, { color: colors.textMuted }]}>Precios en Guaraníes (GS)</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
</View>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1 },
|
|
content: { flex: 1, padding: SPACING.xl, justifyContent: 'center', maxWidth: 500, width: '100%', alignSelf: 'center' },
|
|
logoContainer: { alignItems: 'center', marginBottom: SPACING.xxxl },
|
|
logoCircle: { width: 100, height: 100, borderRadius: 50, alignItems: 'center', justifyContent: 'center', marginBottom: SPACING.md, borderWidth: 2 },
|
|
logoImage: { width: 100, height: 100, borderRadius: 50 },
|
|
brandName: { ...TYPOGRAPHY.h2, letterSpacing: 1, fontWeight: '800' },
|
|
header: { alignItems: 'center', marginBottom: SPACING.xxl },
|
|
title: { ...TYPOGRAPHY.h3, marginBottom: 8 },
|
|
subtitle: { ...TYPOGRAPHY.bodySmall },
|
|
options: { gap: SPACING.md },
|
|
langCard: { flexDirection: 'row', alignItems: 'center', padding: SPACING.xl, borderRadius: BORDER_RADIUS.xl, borderWidth: 1, ...(SHADOWS.medium as any) },
|
|
flag: { fontSize: 32, marginRight: SPACING.lg },
|
|
langInfo: { flex: 1 },
|
|
langName: { ...TYPOGRAPHY.h4, fontWeight: '700' },
|
|
langDesc: { ...TYPOGRAPHY.caption }
|
|
});
|