Untitled
unknown
plain_text
7 months ago
1.6 kB
2
Indexable
Never
// 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-page"> <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} /> <div className="product-details"> <h3>{product.name}</h3> <p>{product.description}</p> <p>Price: ${product.price}</p> </div> </div> ))} </div> </div> </div> ); }; export default ProductPage; /* ProductPage.css */ .product-page { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .product-container { width: 80%; max-width: 1200px; } .product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 20px; } .product-card { border: 1px solid #ccc; border-radius: 8px; overflow: hidden; } .product-card img { width: 100%; height: 200px; object-fit: cover; } .product-details { padding: 15px; } .product-details h3 { margin-top: 0; } .product-details p { margin-bottom: 5px; }
Leave a Comment