update

src/components/product/itemProductSave.tsx

@@ -0,0 +1,171 @@
+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"
+          />
+        </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 - 20,
+  },
+  productImage: {
+    width: winWidth / 2 - 20,
+    height: 200,
+    position: "relative",
+    marginBottom: 5,
+    borderWidth: 1,
+    borderColor: "#d3d3d3",
+    backgroundColor: "#fff",
+    borderRadius: 8,
+  },
+  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;