src/
├── components/
│   ├── Cart.js
│   ├── ProductList.js
│   └── ProductCard.js  <-- NEW COMPONENT
├── data.js
└── App.js

// data.js
export const products = [
  { id: 1, name: 'Laptop', price: 1200 },
  { id: 2, name: 'Mouse', price: 25 },
  { id: 3, name: 'Keyboard', price: 75 },
  { id: 4, name: 'Monitor', price: 300 },
];

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

const ProductCard = ({ product, onAddToCart }) => {
  return (
    <div 
      style={{ border: '1px solid #eee', padding: '15px', borderRadius: '5px' }}
    >
      <h3>{product.name}</h3>
      <p>**${product.price.toFixed(2)}**</p>
      {/* The button triggers the onAddToCart function passed down from App.js */}
      <button 
        onClick={() => onAddToCart(product)} 
        style={{ padding: '10px', backgroundColor: 'teal', color: 'white', border: 'none', cursor: 'pointer' }}
      >
        Add to Cart
      </button>
    </div>
  );
};

export default ProductCard;

// components/ProductList.js
import React from 'react';
import ProductCard from './ProductCard'; // <-- Import the Card

const ProductList = ({ products, onAddToCart }) => {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px' }}>
      {products.map(product => (
        <ProductCard 
          key={product.id} 
          product={product} 
          onAddToCart={onAddToCart} 
        />
      ))}
    </div>
  );
};

export default ProductList;

// components/Cart.js
import React from 'react';

const Cart = ({ items, total, onRemoveFromCart }) => {
  return (
    <div>
      {/* ... (Cart rendering logic remains the same) ... */}
      {items.length === 0 ? (
        <p>Your cart is empty.</p>
      ) : (
        <>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            {items.map(item => (
              <li 
                key={item.id} 
                style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px', borderBottom: '1px dotted #ccc', paddingBottom: '5px' }}
              >
                <span>{item.name} (x{item.quantity})</span>
                <span>
                  **${(item.price * item.quantity).toFixed(2)}**
                  <button 
                    onClick={() => onRemoveFromCart(item.id)}
                    style={{ marginLeft: '10px', backgroundColor: 'red', color: 'white', border: 'none', cursor: 'pointer', padding: '5px 8px' }}
                  >
                    -
                  </button>
                </span>
              </li>
            ))}
          </ul>
          <hr />
          <h3>Total: **${total.toFixed(2)}**</h3>
        </>
      )}
    </div>
  );
};

export default Cart;

// App.js
import React, { useState } from 'react';
import { products } from './data';
import ProductList from './components/ProductList'; // <-- Imported
import Cart from './components/Cart';

function App() {
  const [cartItems, setCartItems] = useState([]);

  // Function to add an item to the cart (Logic remains the same)
  const addToCart = (product) => {
    const existingItem = cartItems.find(item => item.id === product.id);

    if (existingItem) {
      setCartItems(
        cartItems.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        )
      );
    } else {
      setCartItems([...cartItems, { ...product, quantity: 1 }]);
    }
  };

  // Function to remove an item or decrease quantity (Logic remains the same)
  const removeFromCart = (productId) => {
    setCartItems(
      cartItems.reduce((acc, item) => {
        if (item.id === productId) {
          if (item.quantity > 1) {
            acc.push({ ...item, quantity: item.quantity - 1 });
          }
        } else {
          acc.push(item);
        }
        return acc;
      }, [])
    );
  };

  // Calculate the total cost
  const cartTotal = cartItems.reduce(
    (total, item) => total + item.price * item.quantity,
    0
  );

  return (
    <div className="App" style={{ padding: '20px' }}>
      <h1>⚛️ Simple E-Commerce App</h1>
      <div style={{ display: 'flex', gap: '40px' }}>
        
        {/* Product List Section - Uses the ProductList container */}
        <section style={{ flex: 2 }}>
          <h2>Products</h2>
          <ProductList 
            products={products} 
            onAddToCart={addToCart} // <-- Passing the function down
          />
        </section>

        {/* Cart Section */}
        <section style={{ flex: 1, borderLeft: '1px solid #ccc', paddingLeft: '20px' }}>
          <h2>Your Cart</h2>
          <Cart
            items={cartItems}
            total={cartTotal}
            onRemoveFromCart={removeFromCart}
          />
        </section>
      </div>
    </div>
  );
}

export default App;