bestpc_mobile/src/components/buildpc/ProvidersList.tsx

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,
  },
});