Refactor frontend-mobile

2026-07-07 18:08:44 +02:00
parent 69d66729aa
commit 9949b85001
14 changed files with 771 additions and 100 deletions
@@ -0,0 +1,137 @@
+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',
+  },
+});