update

src/components/buildpc/ProvidersList.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import { View, Text, Image, TouchableOpacity, StyleSheet } from "react-native";
+
+const providers = [
+  {
+    logo: require("../../../assets/images/logo-hacom.png"),
+    old: "3.700.000 Vnđ",
+    deal: "20%",
+    status: "Còn hàng",
+    ship: "Liên hệ",
+    total: "3.000.000 Vnđ",
+  },
+  {
+    logo: require("../../../assets/images/logo-hacom.png"),
+    old: "3.700.000 Vnđ",
+    deal: "20%",
+    status: "Còn hàng",
+    ship: "free",
+    total: "3.000.000 Vnđ",
+  },
+];
+
+export function ProvidersList() {
+  return (
+    <View style={styles.container}>
+      {providers.map((p, i) => (
+        <View key={i} style={styles.row}>
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              marginBottom: 10,
+            }}
+          >
+            <Image source={p.logo} style={styles.logo} resizeMode="contain" />
+            <TouchableOpacity style={styles.buyBtn}>
+              <Text style={styles.buyText}>Mua ngay</Text>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.flexBox}>
+            <Text style={styles.textFlex}>Giá sản phẩm:</Text>
+            <Text style={styles.price}>4.700.000 Vnđ</Text>
+            <Text style={styles.oldPrice}>4.700.000 Vnđ</Text>
+          </View>
+          <View style={styles.flexBox}>
+            <Text style={styles.textFlex}>Khuyến mãi:</Text>
+            <Text style={styles.discount}>20%</Text>
+          </View>
+          <View style={styles.flexBox}>
+            <Text style={styles.textFlex}>Giao hàng:</Text>
+            <Text style={styles.ship}>Liên hệ</Text>
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+}
+export default ProvidersList;
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#fff",
+    padding: 10,
+  },
+  row: {
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderColor: "#eee",
+  },
+  logo: {
+    width: 60,
+    height: 30,
+    resizeMode: "contain",
+  },
+  oldPrice: {
+    flex: 1,
+    textDecorationLine: "line-through",
+    color: "#999",
+    fontSize: 13,
+    marginLeft: 10,
+  },
+  deal: {
+    flex: 1,
+    color: "#e11d48",
+    fontWeight: "bold",
+    fontSize: 13,
+  },
+  status: {
+    flex: 1,
+    fontSize: 13,
+    fontWeight: "500",
+  },
+  green: {
+    color: "#22c55e",
+  },
+  price: {
+    color: "#ff0000",
+    fontWeight: 700,
+  },
+  ship: {
+    flex: 1,
+    fontSize: 13,
+    fontWeight: 700,
+  },
+  cellWide: {
+    flex: 1.5,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  total: {
+    fontWeight: "bold",
+    fontSize: 14,
+    color: "#111",
+    marginBottom: 4,
+  },
+  buyBtn: {
+    backgroundColor: "#1877f2",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6,
+  },
+  buyText: {
+    color: "#fff",
+    fontSize: 13,
+    fontWeight: "bold",
+  },
+  flexBox: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 5,
+  },
+  textFlex: {
+    width: 100,
+  },
+  discount: {
+    fontWeight: 700,
+  },
+});