diff --git a/src/components/product/ProductCard.js b/src/components/product/ProductCard.js
index 68691f1..b76db16 100644
--- a/src/components/product/ProductCard.js
+++ b/src/components/product/ProductCard.js
@@ -2,19 +2,25 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
import { colors } from '../../utils/constants';
import { formatPrice } from '../../utils/formatPrice';
+import ProductImage from './ProductImage';
import ProductScoreBadge from './ProductScoreBadge';
export default function ProductCard({ product, rating, onPress }) {
return (
+
{product.name}
- {product.brand || 'Ohne Marke'} · {formatPrice(product.price, product.currency)}
+
+ {product.brand || 'Ohne Marke'} · {formatPrice(product.price, product.currency)}
+
+
+ {product.category || 'Produkt'} · Barcode {product.barcode}
+
{rating ? : null}
- {product.category || 'Produkt'} · Barcode {product.barcode}
);
}
@@ -48,6 +54,8 @@ const styles = StyleSheet.create({
},
note: {
color: colors.muted,
- fontSize: 13
+ fontSize: 13,
+ lineHeight: 18,
+ marginTop: 8
}
});
diff --git a/src/components/product/ProductImage.js b/src/components/product/ProductImage.js
new file mode 100644
index 0000000..58fc5bf
--- /dev/null
+++ b/src/components/product/ProductImage.js
@@ -0,0 +1,56 @@
+import { Image, StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '../../utils/constants';
+
+export default function ProductImage({ imageUrl, size = 'card' }) {
+ const style = size === 'large' ? styles.large : styles.card;
+
+ if (!imageUrl) {
+ return (
+
+ Kein Bild
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+const styles = StyleSheet.create({
+ image: {
+ backgroundColor: colors.surface,
+ borderColor: colors.border,
+ borderWidth: 1
+ },
+ card: {
+ borderRadius: 8,
+ height: 76,
+ width: 76
+ },
+ large: {
+ alignSelf: 'center',
+ borderRadius: 8,
+ height: 220,
+ width: '100%'
+ },
+ placeholder: {
+ alignItems: 'center',
+ backgroundColor: '#eef3ef',
+ borderColor: colors.border,
+ borderWidth: 1,
+ justifyContent: 'center'
+ },
+ placeholderText: {
+ color: colors.muted,
+ fontSize: 12,
+ fontWeight: '800',
+ textAlign: 'center'
+ }
+});
diff --git a/src/screens/ProductDetailScreen.js b/src/screens/ProductDetailScreen.js
index 2c826d4..c3494b3 100644
--- a/src/screens/ProductDetailScreen.js
+++ b/src/screens/ProductDetailScreen.js
@@ -6,6 +6,7 @@ import SecondaryButton from '../components/SecondaryButton';
import AppHeader from '../components/layout/AppHeader';
import ScreenContainer from '../components/layout/ScreenContainer';
import SectionTitle from '../components/layout/SectionTitle';
+import ProductImage from '../components/product/ProductImage';
import ProductScoreBadge from '../components/product/ProductScoreBadge';
import RatingCategoryRow from '../components/product/RatingCategoryRow';
import { calculateProductRating } from '../services/ratingService';
@@ -26,6 +27,7 @@ export default function ProductDetailScreen({ product, preferences, onBack, onAd
+
{product.brand || 'Ohne Marke'}