163 lines
4.0 KiB
JavaScript
163 lines
4.0 KiB
JavaScript
import { faHeart, faStar } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import React, { useState } from "react";
|
|
import {
|
|
Image,
|
|
Platform,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import CheckBox from 'expo-checkbox';
|
|
const ProductCard = ({ product, like, index,liked,all }) => {
|
|
const navigation = useNavigation();
|
|
console.log(product + "ProductCard" + "index: " + index);
|
|
const [isChecked, setIsChecked] = useState(false);
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
style={styles.container}
|
|
onPress={() => navigation.navigate("Product", { product })}
|
|
>
|
|
<View style={styles.upper}>
|
|
<Image
|
|
style={{ width: "100%", height: 200, resizeMode: "cover" }}
|
|
source={{ uri: product?.img }}
|
|
/>
|
|
<View style={styles.heart}>
|
|
<CheckBox
|
|
value={liked.includes(index)|| all===true}
|
|
onValueChange={() => like(index)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={{ padding: 10, backgroundColor: "#fff" }}>
|
|
<Text style={styles.text} numberOfLines={2}>
|
|
{product?.name}
|
|
</Text>
|
|
<View style={styles.priceCon}>
|
|
<Text
|
|
style={product?.promo ? styles.textPricePromo : styles.textPrice}
|
|
>
|
|
₱{product?.price}
|
|
</Text>
|
|
{product?.promo ? (
|
|
<Text style={styles.textPrice}>
|
|
{" "}
|
|
{product?.price - product?.price * 0.3}{" "}
|
|
<Text style={{ fontWeight: "400" }}>(-{product?.promo}%)</Text>
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
<View style={styles.footer}>
|
|
<Text style={styles.textMin}>
|
|
min. order: {product?.min} {product?.per}
|
|
</Text>
|
|
<Text style={styles.textSold}>{product?.sold} sold</Text>
|
|
</View>
|
|
{product?.rate ? (
|
|
<View style={styles.rateCon}>
|
|
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
|
|
<Text style={styles.textRate}>
|
|
{product.rate} ({product?.raterTotal})
|
|
</Text>
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
// flex: 1,
|
|
// backgroundColor: "#ff3333",
|
|
width: "95%",
|
|
margin: 5,
|
|
borderRadius: 6,
|
|
borderColor: "#dddd",
|
|
overflow: "hidden",
|
|
},
|
|
wrapper: {
|
|
width: "100%",
|
|
// height: 200,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
// backgroundColor: "#ffaa00",
|
|
},
|
|
header: {
|
|
fontSize: 14,
|
|
fontWeight: "700",
|
|
textTransform: "uppercase",
|
|
},
|
|
upper: {},
|
|
heart: {
|
|
position: "absolute",
|
|
top: 10,
|
|
right: 10,
|
|
height:20,
|
|
width:20
|
|
},
|
|
text: {
|
|
fontSize: 13,
|
|
fontWeight: "600",
|
|
textTransform: "capitalize",
|
|
color: "#333",
|
|
letterSpacing: 0.5,
|
|
},
|
|
priceCon: {
|
|
flexDirection: "row",
|
|
paddingVertical: 4,
|
|
},
|
|
textPrice: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
textTransform: "capitalize",
|
|
color: "#ffaa00",
|
|
},
|
|
textPricePromo: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
textTransform: "capitalize",
|
|
textDecorationLine: "line-through",
|
|
color: "#ffaa00",
|
|
},
|
|
textMin: {
|
|
fontSize: 11,
|
|
fontWeight: "600",
|
|
// textTransform: "capitalize",
|
|
color: "#bdbdbd",
|
|
},
|
|
textSold: {
|
|
fontSize: 11,
|
|
fontWeight: "600",
|
|
// textTransform: "capitalize",
|
|
color: "#bdbdbd",
|
|
},
|
|
rateCon: {
|
|
flexDirection: "row",
|
|
// justifyContent:'center',
|
|
alignItems: "center",
|
|
paddingVertical: 3,
|
|
},
|
|
textRate: {
|
|
fontSize: 12,
|
|
color: "#838383",
|
|
},
|
|
img: {
|
|
width: 400,
|
|
height: 200,
|
|
resizeMode: "cover",
|
|
margin: "auto",
|
|
borderRadius: 10,
|
|
// backgroundColor: "#ffaa00",
|
|
},
|
|
footer: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
},
|
|
});
|
|
export default ProductCard;
|