Antoni Nuñez Romeu
138 lines
3.6 KiB
TypeScript
138 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useRouter } from 'expo-router';
|
|
import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
|
|
|
|
export default function HomeScreen() {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.hero}>
|
|
<Image
|
|
source={require('../../assets/farmaclic_logo.png')}
|
|
style={styles.logo}
|
|
resizeMode="contain"
|
|
/>
|
|
<Text style={styles.brandName}>FarmaClic</Text>
|
|
<Text style={styles.description}>
|
|
Encuentra tus medicamentos en farmacias cercanas
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.cards}>
|
|
<TouchableOpacity
|
|
style={styles.card}
|
|
activeOpacity={0.85}
|
|
onPress={() => router.push('/(tabs)')}
|
|
>
|
|
<View style={[styles.cardIcon, styles.cardIconSearch]}>
|
|
<Ionicons name="search" size={24} color={colors.onPrimaryContainer} />
|
|
</View>
|
|
<View style={styles.cardContent}>
|
|
<Text style={styles.cardLabel}>Buscar Medicamento</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={colors.onPrimaryContainer} style={{ opacity: 0.7 }} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.card, styles.cardScan]}
|
|
activeOpacity={0.85}
|
|
onPress={() => router.push('/scanner')}
|
|
>
|
|
<View style={[styles.cardIcon, styles.cardIconScan]}>
|
|
<Ionicons name="scan" size={24} color="#ffffff" />
|
|
</View>
|
|
<View style={styles.cardContent}>
|
|
<Text style={[styles.cardLabel, styles.cardLabelScan]}>Escanear TSI</Text>
|
|
<Ionicons name="chevron-forward" size={20} color="#ffffff" style={{ opacity: 0.7 }} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingHorizontal: spacing.lg,
|
|
gap: spacing.lg,
|
|
},
|
|
hero: {
|
|
alignItems: 'center',
|
|
gap: spacing.sm,
|
|
marginBottom: spacing.md,
|
|
},
|
|
logo: {
|
|
width: 120,
|
|
height: 120,
|
|
marginBottom: spacing.xs,
|
|
},
|
|
brandName: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold',
|
|
color: colors.text,
|
|
letterSpacing: -0.5,
|
|
},
|
|
description: {
|
|
fontSize: 16,
|
|
color: colors.textSecondary,
|
|
textAlign: 'center',
|
|
maxWidth: 260,
|
|
lineHeight: 24,
|
|
},
|
|
cards: {
|
|
width: '100%',
|
|
maxWidth: 320,
|
|
gap: spacing.md,
|
|
},
|
|
card: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: spacing.md,
|
|
backgroundColor: colors.primaryContainer,
|
|
borderRadius: borderRadius.lg,
|
|
padding: spacing.md,
|
|
minHeight: 64,
|
|
...shadows.card,
|
|
},
|
|
cardScan: {
|
|
backgroundColor: colors.scanButton,
|
|
},
|
|
cardIcon: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: borderRadius.md,
|
|
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
},
|
|
cardIconSearch: {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.3)',
|
|
},
|
|
cardIconScan: {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
|
},
|
|
cardContent: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
cardLabel: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
color: colors.onPrimaryContainer,
|
|
lineHeight: 24,
|
|
},
|
|
cardLabelScan: {
|
|
color: '#ffffff',
|
|
},
|
|
});
|