up

src/components/product/ItemProduct.tsx

@@ -0,0 +1,198 @@
+import React, { useState } from "react";
+import {
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  Dimensions,
+} from "react-native";
+
+var winWidth = Dimensions.get("window").width; //full width
+var winHeight = Dimensions.get("window").height;
+
+const ItemProduct = ({ 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.boxSaleoff}>
+          <View style={styles.beforeSaleoff}></View>
+          <Text style={styles.saleoffText}>{product.saleOff}</Text>
+        </View>
+      </TouchableOpacity>
+      <View>
+        <TouchableOpacity>
+          <Text numberOfLines={2} style={styles.productName}>
+            {product.productName}
+          </Text>
+        </TouchableOpacity>
+        <View style={styles.BoxPriceRating}>
+          <View>
+            <Text style={styles.price}>{formatCurrency(product.price)}đ</Text>
+            <Text style={styles.oldPrice}>
+              {formatCurrency(product.oldPrice)}đ
+            </Text>
+          </View>
+          <View>
+            <Image
+              source={
+                product.review.rate !== undefined
+                  ? require(`../../../assets/images/icon_star_${product.review.rate}.png`)
+                  : require("../../../assets/images/icon_star_0.png")
+              }
+              style={styles.iconReviewRating}
+              alt="icon review"
+              resizeMode="contain"
+            />
+          </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,
+    marginRight: 10,
+    marginBottom: 10,
+    padding: 12,
+  },
+  productImage: {
+    width: winWidth / 2 - 20,
+    height: 150,
+    position: "relative",
+    marginBottom: 5,
+    borderWidth: 1,
+    borderColor: "#d3d3d3",
+    backgroundColor: "#fff",
+    borderRadius: 8,
+  },
+  productImg: {
+    width: "100%",
+    height: "100%",
+    objectFit: "contain",
+  },
+  boxSaleoff: {
+    position: "absolute",
+    right: 10,
+    top: 10,
+    width: 35,
+    height: 35,
+    borderRadius: 25,
+    backgroundColor: "#da251c",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  beforeSaleoff: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: [{ translateY: "-50%" }, { translateX: "-50%" }],
+    width: 30,
+    height: 30,
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: "#fff",
+    borderRadius: 25,
+  },
+  saleoffText: {
+    fontSize: 8,
+    fontWeight: 700,
+    backgroundColor: "#da251c",
+    borderRadius: 25,
+    color: "#fff",
+    paddingLeft: 2,
+  },
+  productName: {
+    fontWeight: 700,
+    fontSize: 13,
+    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",
+  },
+  oldPrice: {
+    fontSize: 13,
+    textDecorationLine: "line-through",
+    color: "#595959",
+    fontWeight: "bold",
+  },
+  iconReviewRating: {
+    width: 58,
+    height: 11,
+    marginBottom: 2,
+  },
+  boxStore: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 5,
+  },
+  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 ItemProduct;