Tạo một component ProductList bằng ReactJS

// src/components/ProductList.js
import React from 'react';
import ProductCard from './ProductCard';
import './ProductList.css';

const ProductList = ({ products }) => {
  return (
    <div className="product-list">
      {products.map((product, index) => (
        <ProductCard key={index} product={product} />
      ))}
    </div>
  );
};

export default ProductList;

// src/components/ProductCard.js
import React from 'react';
import './ProductCard.css';

const ProductCard = ({ product }) => {
  return (
    <div className="product-card">
      <img src={product.img} alt={product.name} className="product-image" />
      <div className="product-details">
        <h3>{product.name}</h3>
        <p>{product.description}</p>
        <p className="product-price">${product.price}</p>
      </div>
    </div>
  );
};

export default ProductCard;

/* src/components/ProductList.css */

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Optional: Adjust as needed */
@media (max-width: 768px) {
  .product-list {
    flex-direction: column;
  }
}

/* src/components/ProductCard.css */

.product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
  }
  
  .product-card:hover {
    transform: scale(1.05);
  }
  
  .product-image {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
  }
  
  .product-details {
    padding: 15px;
    color: black;
  }
  
  .product-details h3 {
    margin-top: 0;
    color: black;
  }
  
  .product-price {
    color: #e44d26;
    font-weight: bold;
  }
  

// src/App.js
import React from 'react';
import ProductList from './components/ProductList';
import './App.css';

function App() {
  const productsArray = [
    {
      name: 'iPhone 15 Pro 128GB',
      price: 22990000,
      img: 'https:/2023/09/0020094_iphone-15-pro-max-128gb_550.jpeg',
      description: 'Giảm 40% tối đa 1.000.000 VNĐ cho đơn hàng từ 2.000.000 VNĐ',
    },
    {
      name: 'iPhone 15 Pro ',
      price: 24990000,
      img: 'https:/uploads/2023/09/iphone-15-pro-max_7__1.webp',
      description: 'Giảm 20% tối đa 1.000.000 VNĐ cho đơn hàng từ 6.000.000 VNĐ',
    },
    {
      name: 'Laptop Pro',
      price: 23990000,
      img: 'https:/uploads/2022/06/macbook-air-starlight-select-20220606.jpg',
      description: 'Giảm 50% tối đa 1.000.000 VNĐ cho đơn hàng từ 7.000.000 VNĐ',
    },
    // Add more products as needed
  ];

  return (
    <div className="App">
      <header className="App-header">
        <ProductList products={productsArray} />
      </header>
    </div>
  );
}

export default App;

npm start