124 lines
3.4 KiB
JavaScript
124 lines
3.4 KiB
JavaScript
import { StyleSheet, Text, View } from 'react-native';
|
|
|
|
import PrimaryButton from '../components/PrimaryButton';
|
|
import AppHeader from '../components/layout/AppHeader';
|
|
import ScreenContainer from '../components/layout/ScreenContainer';
|
|
import SectionTitle from '../components/layout/SectionTitle';
|
|
import ProductCard from '../components/product/ProductCard';
|
|
import { calculateProductRating } from '../services/ratingService';
|
|
import { colors } from '../utils/constants';
|
|
|
|
export default function HomeScreen({ preferences, recentProducts, onStartScan, onOpenProduct }) {
|
|
const frequentProducts = [...recentProducts]
|
|
.filter((product) => (product.scanCount || 0) > 1)
|
|
.sort((a, b) => (b.scanCount || 0) - (a.scanCount || 0))
|
|
.slice(0, 3);
|
|
|
|
return (
|
|
<ScreenContainer>
|
|
<AppHeader
|
|
title="Shoppy"
|
|
subtitle="Scanne Produkte im Supermarkt und erhalte eine persönliche Kaufempfehlung."
|
|
/>
|
|
|
|
<View style={styles.hero}>
|
|
<Text style={styles.eyebrow}>Smart Shopping Companion</Text>
|
|
<Text style={styles.title}>Bereit für den nächsten Einkauf?</Text>
|
|
<Text style={styles.copy}>
|
|
Prüfe Allergien, Ernährung, Budget und Nachhaltigkeit direkt am Regal.
|
|
</Text>
|
|
<PrimaryButton label="Produkt scannen" onPress={onStartScan} />
|
|
</View>
|
|
|
|
{frequentProducts.length > 0 ? (
|
|
<>
|
|
<SectionTitle>Häufig gekauft</SectionTitle>
|
|
{frequentProducts.map((product) => (
|
|
<View key={`frequent-${product.id}`} style={styles.frequentWrap}>
|
|
<ProductCard
|
|
product={product}
|
|
rating={calculateProductRating(product, preferences)}
|
|
onPress={() => onOpenProduct(product)}
|
|
/>
|
|
<Text style={styles.scanCount}>{product.scanCount} Scans</Text>
|
|
</View>
|
|
))}
|
|
</>
|
|
) : null}
|
|
|
|
<SectionTitle>Letzte Scans</SectionTitle>
|
|
{recentProducts.length === 0 ? (
|
|
<View style={styles.emptyState}>
|
|
<Text style={styles.emptyTitle}>Noch keine Produkte gescannt</Text>
|
|
<Text style={styles.emptyCopy}>Starte einen Scan oder nutze die manuelle Suche.</Text>
|
|
</View>
|
|
) : (
|
|
recentProducts.map((product) => (
|
|
<ProductCard
|
|
key={product.id}
|
|
product={product}
|
|
rating={calculateProductRating(product, preferences)}
|
|
onPress={() => onOpenProduct(product)}
|
|
/>
|
|
))
|
|
)}
|
|
</ScreenContainer>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
hero: {
|
|
backgroundColor: colors.surface,
|
|
borderColor: colors.border,
|
|
borderRadius: 8,
|
|
borderWidth: 1,
|
|
gap: 12,
|
|
padding: 18
|
|
},
|
|
eyebrow: {
|
|
color: colors.primary,
|
|
fontSize: 13,
|
|
fontWeight: '800',
|
|
textTransform: 'uppercase'
|
|
},
|
|
title: {
|
|
color: colors.text,
|
|
fontSize: 25,
|
|
fontWeight: '800',
|
|
lineHeight: 31
|
|
},
|
|
copy: {
|
|
color: colors.muted,
|
|
fontSize: 16,
|
|
lineHeight: 23
|
|
},
|
|
frequentWrap: {
|
|
gap: 6
|
|
},
|
|
scanCount: {
|
|
alignSelf: 'flex-start',
|
|
color: colors.primary,
|
|
fontSize: 12,
|
|
fontWeight: '800',
|
|
marginLeft: 12
|
|
},
|
|
emptyState: {
|
|
backgroundColor: colors.surface,
|
|
borderColor: colors.border,
|
|
borderRadius: 8,
|
|
borderWidth: 1,
|
|
padding: 18
|
|
},
|
|
emptyTitle: {
|
|
color: colors.text,
|
|
fontSize: 16,
|
|
fontWeight: '800'
|
|
},
|
|
emptyCopy: {
|
|
color: colors.muted,
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
marginTop: 4
|
|
}
|
|
});
|