egommerce/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added base product fetching method

Browse Source
This commit is contained in:
Piotr Biernat
2025-10-24 14:45:07 +02:00
parent 333318ae0f
commit de1cca5739
1 changed files with 5 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/FeaturedProducts.tsx
View File

@@ -33,34 +33,21 @@ function FeaturedProducts() {
<h2 className="text-center mb-4">Featured Products</h2>
<div className="row g-4">
{/* Product Card */}
<div className="col-md-4">
<div className="card h-100 shadow-sm">
{/* <img src="https://via.placeholder.com/400x300" className="card-img-top" alt="Product 1" /> */}
<div className="card-body d-flex flex-column">
<h5 className="card-title">Product Name 1</h5>
<p className="card-text flex-grow-1">Brief description of the product to entice customers.</p>
<div className="mt-3 d-flex justify-content-between align-items-center">
<span className="fw-bold fs-5">$49.99</span>
<a href="#" className="btn btn-sm btn-outline-primary">Buy Now</a>
</div>
</div>
</div>
</div>
{/* Repeat Product Cards as needed */}
{data.map((product) => (
<div className="col-md-4">
<div className="card h-100 shadow-sm">
{/* <img src="https://via.placeholder.com/400x300" className="card-img-top" alt="Product 2" /> */}
<div className="card-body d-flex flex-column">
<h5 className="card-title">Product Name 2</h5>
<p className="card-text flex-grow-1">Another attractive product with a brief description.</p>
<h5 className="card-title">{product["name"]}</h5>
{/* <p className="card-text flex-grow-1">DESCRIPTION</p> */}
<div className="mt-3 d-flex justify-content-between align-items-center">
<span className="fw-bold fs-5">$79.99</span>
<span className="fw-bold fs-5">{product["price"]}</span>
<a href="#" className="btn btn-sm btn-outline-primary">Buy Now</a>
</div>
</div>
</div>
</div>
{/* Add more product cards as needed */}
))}
</div>
</div>
</section>