Untitled

// ProductPage.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './ProductPage.css';

const ProductPage = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/products')
      .then(response => setProducts(response.data))
      .catch(error => console.error('Error fetching products:', error));
  }, []);

  return (
    <div className="product-container">
      <h1>Products</h1>
      <div className="product-list">
        {products.map(product => (
          <div key={product.id} className="product-card">
            <img src={product.image} alt={product.name} />
            <h3>{product.name}</h3>
            <p>{product.description}</p>
            <p>Price: ${product.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductPage;







/* ProductPage.css */

.product-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 20px;
}

.product-card {
  border: 1px solid #ccc;
  padding: 10px;
}

.product-card img {
  max-width: 100%;
  height: auto;
}

.product-card h3 {
  margin-top: 0;
}

.product-card p {
  margin-bottom: 5px;
}