174 lines
3.8 KiB
TypeScript
174 lines
3.8 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
StyleSheet,
|
|
Image,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
Dimensions,
|
|
} from "react-native";
|
|
import { globalStyles } from "../../styles/globalStyles";
|
|
|
|
var winWidth = Dimensions.get("window").width; //full width
|
|
var winHeight = Dimensions.get("window").height;
|
|
|
|
const ItemProductSave = ({ product }: { product: any }) => {
|
|
function formatCurrency(a: number | string): string {
|
|
let b = parseFloat(a.toString())
|
|
.toFixed(2)
|
|
.replace(/(\d)(?=(\d{3})+\.)/g, "$1.")
|
|
.toString();
|
|
var len = b.length;
|
|
b = b.substring(0, len - 3);
|
|
return b;
|
|
}
|
|
|
|
return (
|
|
<View style={styles.productItem}>
|
|
<TouchableOpacity style={styles.productImage}>
|
|
<Image
|
|
source={{ uri: product.productImage.large }}
|
|
style={styles.productImg}
|
|
alt={product.productName}
|
|
/>
|
|
<View style={styles.iconSave}>
|
|
<Image
|
|
source={require("../../../assets/images/icon_heart.png")}
|
|
style={styles.imgsave}
|
|
alt="icon-heart"
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
<View>
|
|
<TouchableOpacity>
|
|
<Text numberOfLines={2} style={styles.productName}>
|
|
{product.productName}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<View style={styles.BoxPriceRating}>
|
|
<View style={globalStyles.boxFlex}>
|
|
<Text style={styles.price}>{formatCurrency(product.price)}đ</Text>
|
|
<Text style={styles.oldPrice}>
|
|
{formatCurrency(product.oldPrice)}đ
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.boxStore}>
|
|
<View style={styles.boxIconStore}>
|
|
<Image
|
|
source={require("../../../assets/images/icon_store_white.png")}
|
|
style={styles.iconStore}
|
|
alt="icon store"
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
<Text style={styles.storeName}>
|
|
Có {product.toltalStore} cửa hàng bán
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
productItem: {
|
|
width: winWidth / 2 - 15,
|
|
},
|
|
productImage: {
|
|
width: "100%",
|
|
height: 200,
|
|
position: "relative",
|
|
marginBottom: 5,
|
|
borderWidth: 1,
|
|
borderColor: "#d3d3d3",
|
|
backgroundColor: "#fff",
|
|
borderRadius: 8,
|
|
overflow: "hidden",
|
|
},
|
|
productImg: {
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain",
|
|
},
|
|
iconSave: {
|
|
position: "absolute",
|
|
right: 5,
|
|
top: 5,
|
|
width: 16,
|
|
height: 13,
|
|
zIndex: 9,
|
|
},
|
|
imgsave: {
|
|
width: "100%",
|
|
objectFit: "contain",
|
|
margin: "auto",
|
|
},
|
|
productName: {
|
|
fontWeight: 700,
|
|
fontSize: 14,
|
|
color: "#000",
|
|
marginBottom: 5,
|
|
},
|
|
summary: {
|
|
marginTop: 5,
|
|
color: "#595959",
|
|
},
|
|
locahostPro: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
iconMap: {},
|
|
BoxPriceRating: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-end",
|
|
},
|
|
price: {
|
|
fontSize: 15,
|
|
fontWeight: "bold",
|
|
color: "#d80a00",
|
|
marginRight: 10,
|
|
},
|
|
oldPrice: {
|
|
fontSize: 13,
|
|
textDecorationLine: "line-through",
|
|
color: "#595959",
|
|
fontWeight: "bold",
|
|
},
|
|
iconReviewRating: {
|
|
width: 58,
|
|
height: 11,
|
|
marginBottom: 2,
|
|
},
|
|
boxStore: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginTop: 10,
|
|
},
|
|
boxIconStore: {
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: 25,
|
|
backgroundColor: "#FF7A00",
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginRight: 5,
|
|
},
|
|
iconStore: {
|
|
width: 18,
|
|
height: 18,
|
|
},
|
|
storeName: {
|
|
fontSize: 13,
|
|
fontWeight: "bold",
|
|
color: "#000",
|
|
},
|
|
});
|
|
|
|
export default ItemProductSave;
|