Mobile App design

2026-07-09 13:33:54 +02:00
parent 5f604b11ba
commit 2f36ef685d
32 changed files with 1793 additions and 926 deletions
@@ -1,15 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { View, FlatList, StyleSheet, Text, TouchableOpacity, useWindowDimensions } from 'react-native';
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Image, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useRouter } from 'expo-router';
-import { SearchBar } from '../../components/SearchBar';
-import { MedicineCard } from '../../components/MedicineCard';
-import { LoadingSpinner } from '../../components/LoadingSpinner';
-import { useDebounce } from '../../hooks/useDebounce';
-import { searchMedicines } from '../../services/medicines';
-import { colors, spacing, borderRadius } from '../../constants/theme';
-import { Medicine } from '../../types';
-import { config } from '../../constants/config';
+import { useThemeContext } from '../../components/ThemeProvider';
+import { spacing, borderRadius, shadows } from '../../constants/theme';

 const TABLET_MIN_WIDTH = 768;

@@ -17,77 +11,51 @@ export default function HomeScreen() {
  const router = useRouter();
  const { width } = useWindowDimensions();
  const isTablet = width >= TABLET_MIN_WIDTH;
-  const [query, setQuery] = useState('');
-  const [results, setResults] = useState<Medicine[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const debouncedQuery = useDebounce(query, config.SEARCH_DEBOUNCE_MS);
-
-  useEffect(() => {
-    if (debouncedQuery.length < 2) {
-      setResults([]);
-      return;
-    }
-
-    const fetchResults = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const data = await searchMedicines(debouncedQuery);
-        setResults(data);
-      } catch (err) {
-        setError('Error al buscar medicamentos');
-        console.error(err);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchResults();
-  }, [debouncedQuery]);
-
-  const handleSearch = (searchQuery: string) => {
-    setQuery(searchQuery);
-  };
+  const { colors } = useThemeContext();

  return (
-    <View style={styles.container}>
-      <View style={[styles.searchContainer, isTablet && styles.searchContainerTablet]}>
-        <SearchBar
-          onSearch={handleSearch}
-          value={query}
-          onChangeText={setQuery}
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <View style={[styles.hero, isTablet && styles.heroTablet]}>
+        <Image
+          source={require('../../assets/farmaclic_logo.png')}
+          style={[styles.logo, isTablet && styles.logoTablet]}
+          resizeMode="contain"
        />
-        <TouchableOpacity
-          style={styles.scannerButton}
-          onPress={() => router.push('/scanner')}
-        >
-          <Ionicons name="scan" size={22} color="#ffffff" />
-        </TouchableOpacity>
+        <Text style={[styles.brandName, isTablet && styles.brandNameTablet, { color: colors.text }]}>FarmaClic</Text>
+        <Text style={[styles.description, isTablet && styles.descriptionTablet, { color: colors.textSecondary }]}>
+          Encuentra tus medicamentos en farmacias cercanas
+        </Text>
      </View>

-      {isLoading && <LoadingSpinner message="Buscando medicamentos..." />}
+      <View style={[styles.cards, isTablet && styles.cardsTablet]}>
+        <TouchableOpacity
+          style={[styles.card, isTablet && styles.cardTablet, { backgroundColor: colors.primaryContainer }]}
+          activeOpacity={0.85}
+          onPress={() => router.push('/(tabs)/search')}
+        >
+          <View style={[styles.cardIcon, styles.cardIconSearch]}>
+            <Ionicons name="search" size={isTablet ? 28 : 24} color={colors.onPrimaryContainer} />
+          </View>
+          <View style={styles.cardContent}>
+            <Text style={[styles.cardLabel, isTablet && styles.cardLabelTablet, { color: colors.onPrimaryContainer }]}>Buscar Medicamento</Text>
+            <Ionicons name="chevron-forward" size={20} color={colors.onPrimaryContainer} style={{ opacity: 0.7 }} />
+          </View>
+        </TouchableOpacity>

-      {error && (
-        <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet]}>
-          <Text style={styles.errorText}>{error}</Text>
-        </View>
-      )}
-
-      {!isLoading && !error && results.length === 0 && query.length >= 2 && (
-        <View style={styles.emptyContainer}>
-          <Text style={styles.emptyText}>No se encontraron medicamentos</Text>
-        </View>
-      )}
-
-      <FlatList
-        data={results}
-        keyExtractor={(item) => item.nregistro}
-        renderItem={({ item }) => <MedicineCard medicine={item} />}
-        contentContainerStyle={[styles.list, isTablet && styles.listTablet]}
-        showsVerticalScrollIndicator={false}
-      />
+        <TouchableOpacity
+          style={[styles.card, styles.cardScan, isTablet && styles.cardTablet]}
+          activeOpacity={0.85}
+          onPress={() => router.push('/scanner')}
+        >
+          <View style={[styles.cardIcon, styles.cardIconScan]}>
+            <Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
+          </View>
+          <View style={styles.cardContent}>
+            <Text style={[styles.cardLabel, styles.cardLabelScan, isTablet && styles.cardLabelTablet]}>Escanear TSI</Text>
+            <Ionicons name="chevron-forward" size={20} color="#ffffff" style={{ opacity: 0.7 }} />
+          </View>
+        </TouchableOpacity>
+      </View>
    </View>
  );
 }
@@ -95,63 +63,101 @@ export default function HomeScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: colors.background,
-  },
-  searchContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: spacing.lg,
-    maxWidth: 480,
-    alignSelf: 'center',
-    width: '100%',
-  },
-  searchContainerTablet: {
-    maxWidth: 700,
-    alignSelf: 'center',
-    width: '100%',
-  },
-  scannerButton: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    backgroundColor: colors.scanButton,
    alignItems: 'center',
    justifyContent: 'center',
-    shadowColor: '#2b5bb5',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 12,
-    elevation: 6,
+    paddingHorizontal: spacing.lg,
+    gap: spacing.lg,
  },
-  list: {
-    paddingBottom: spacing.xl,
-  },
-  listTablet: {
-    maxWidth: 700,
-    alignSelf: 'center',
-    width: '100%',
-  },
-  errorContainer: {
-    padding: spacing.md,
-    marginHorizontal: spacing.lg,
-    backgroundColor: colors.dangerContainer,
-    borderRadius: borderRadius.lg,
-  },
-  errorContainerTablet: {
-    maxWidth: 700,
-    alignSelf: 'center',
-  },
-  errorText: {
-    color: colors.danger,
-    textAlign: 'center',
-    fontSize: 14,
-  },
-  emptyContainer: {
-    padding: spacing.xl,
+  hero: {
    alignItems: 'center',
+    gap: spacing.sm,
+    marginBottom: spacing.md,
  },
-  emptyText: {
-    color: colors.textSecondary,
+  heroTablet: {
+    marginBottom: spacing.xl,
+  },
+  logo: {
+    width: 120,
+    height: 120,
+    marginBottom: spacing.xs,
+  },
+  logoTablet: {
+    width: 160,
+    height: 160,
+  },
+  brandName: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    letterSpacing: -0.5,
+  },
+  brandNameTablet: {
+    fontSize: 36,
+  },
+  description: {
    fontSize: 16,
+    textAlign: 'center',
+    maxWidth: 260,
+    lineHeight: 24,
+  },
+  descriptionTablet: {
+    fontSize: 18,
+    maxWidth: 400,
+    lineHeight: 28,
+  },
+  cards: {
+    width: '100%',
+    maxWidth: 320,
+    gap: spacing.md,
+  },
+  cardsTablet: {
+    maxWidth: 480,
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    borderRadius: borderRadius.lg,
+    padding: spacing.md,
+    minHeight: 64,
+    ...shadows.card,
+  },
+  cardTablet: {
+    padding: spacing.lg,
+    minHeight: 72,
+  },
+  cardScan: {
+    backgroundColor: '#2b5bb5',
+  },
+  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',
+    lineHeight: 24,
+  },
+  cardLabelTablet: {
+    fontSize: 20,
+  },
+  cardLabelScan: {
+    color: '#ffffff',
  },
 });