Antoni Nuñez Romeu
109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useRouter } from 'expo-router';
|
|
import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
|
|
|
|
const TABLET_MIN_WIDTH = 768;
|
|
|
|
export default function ScanTabScreen() {
|
|
const router = useRouter();
|
|
const { width } = useWindowDimensions();
|
|
const isTablet = width >= TABLET_MIN_WIDTH;
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={[styles.content, isTablet && styles.contentTablet]}>
|
|
<View style={[styles.iconContainer, isTablet && styles.iconContainerTablet]}>
|
|
<Ionicons name="scan" size={isTablet ? 80 : 64} color={colors.scanButton} />
|
|
</View>
|
|
<Text style={[styles.title, isTablet && styles.titleTablet]}>Escanear TSI</Text>
|
|
<Text style={[styles.description, isTablet && styles.descriptionTablet]}>
|
|
Escanea el código de barras de tu tarjeta sanitaria para encontrar tus medicamentos
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={[styles.button, shadows.scanButton, isTablet && styles.buttonTablet]}
|
|
activeOpacity={0.85}
|
|
onPress={() => router.push('/scanner')}
|
|
>
|
|
<Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
|
|
<Text style={[styles.buttonText, isTablet && styles.buttonTextTablet]}>Iniciar escaneo</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
content: {
|
|
alignItems: 'center',
|
|
paddingHorizontal: spacing.xl,
|
|
gap: spacing.md,
|
|
},
|
|
contentTablet: {
|
|
gap: spacing.lg,
|
|
},
|
|
iconContainer: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 50,
|
|
backgroundColor: colors.primaryContainer,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: spacing.sm,
|
|
},
|
|
iconContainerTablet: {
|
|
width: 140,
|
|
height: 140,
|
|
borderRadius: 70,
|
|
},
|
|
title: {
|
|
fontSize: 22,
|
|
fontWeight: 'bold',
|
|
color: colors.text,
|
|
},
|
|
titleTablet: {
|
|
fontSize: 28,
|
|
},
|
|
description: {
|
|
fontSize: 15,
|
|
color: colors.textSecondary,
|
|
textAlign: 'center',
|
|
lineHeight: 22,
|
|
maxWidth: 280,
|
|
},
|
|
descriptionTablet: {
|
|
fontSize: 17,
|
|
maxWidth: 420,
|
|
lineHeight: 26,
|
|
},
|
|
button: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: spacing.sm,
|
|
backgroundColor: colors.scanButton,
|
|
borderRadius: borderRadius.lg,
|
|
paddingVertical: spacing.md,
|
|
paddingHorizontal: spacing.xl,
|
|
marginTop: spacing.md,
|
|
},
|
|
buttonTablet: {
|
|
paddingVertical: spacing.lg,
|
|
paddingHorizontal: spacing.xl * 1.5,
|
|
},
|
|
buttonText: {
|
|
fontSize: 17,
|
|
fontWeight: '600',
|
|
color: '#ffffff',
|
|
},
|
|
buttonTextTablet: {
|
|
fontSize: 20,
|
|
},
|
|
});
|