Dennis Hundertmark
59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
import { Product } from "@/utils/api";
|
|
import { COLORS } from "@/utils/colors";
|
|
import { useRouter } from "expo-router";
|
|
import React from "react";
|
|
import { Pressable, StyleSheet, Text, Image, View } from "react-native";
|
|
|
|
interface ProductCardProps {
|
|
product: Product;
|
|
}
|
|
|
|
const ProductCard = ({ product }: ProductCardProps) => {
|
|
const router = useRouter();
|
|
return (
|
|
<Pressable
|
|
style={styles.productCard}
|
|
onPress={() => router.push(`/product/${product.id}`)}
|
|
>
|
|
<Image source={{ uri: product.image }} style={styles.image} />
|
|
<View style={styles.productInfo}>
|
|
<Text style={styles.title} numberOfLines={2}>
|
|
{product.title}
|
|
</Text>
|
|
<Text style={styles.price}>{product.price}</Text>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
export default ProductCard;
|
|
|
|
const styles = StyleSheet.create({
|
|
productCard: {
|
|
flex: 1,
|
|
margin: 0,
|
|
gap: 8,
|
|
padding: 12,
|
|
borderRadius: 16,
|
|
backgroundColor: "#fff",
|
|
boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
|
|
},
|
|
image: {
|
|
width: "100%",
|
|
height: 150,
|
|
borderRadius: 12,
|
|
},
|
|
productInfo: {
|
|
gap: 4,
|
|
},
|
|
title: {
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
},
|
|
price: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
color: COLORS.primary,
|
|
},
|
|
});
|