52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import '../styles/global.css'
|
|
|
|
export default function ProductCard({ product }) {
|
|
const price = product.discount_price || product.price
|
|
const discount =
|
|
product.discount_price && product.is_on_sale
|
|
? Math.round(
|
|
((product.price - product.discount_price) / product.price) * 100
|
|
)
|
|
: 0
|
|
|
|
return (
|
|
<div className="product-card">
|
|
<div className="product-image-container">
|
|
<img src={product.images[0]} alt={product.name} />
|
|
{product.is_on_sale && discount > 0 && (
|
|
<div className="discount-badge">{discount}% OFF</div>
|
|
)}
|
|
{product.is_featured && (
|
|
<div className="featured-badge">FEATURED</div>
|
|
)}
|
|
</div>
|
|
<div className="product-info">
|
|
<h3>{product.name}</h3>
|
|
<p className="brand">{product.brand}</p>
|
|
<div className="price">
|
|
{product.discount_price ? (
|
|
<>
|
|
<span className="original">${product.price.toFixed(2)}</span>
|
|
<span className="discounted">${product.discount_price.toFixed(2)}</span>
|
|
</>
|
|
) : (
|
|
<span>${price.toFixed(2)}</span>
|
|
)}
|
|
</div>
|
|
<p className="stock">
|
|
{product.stock > 0 ? (
|
|
<span className="in-stock">In Stock</span>
|
|
) : (
|
|
<span className="out-of-stock">Out of Stock</span>
|
|
)}
|
|
</p>
|
|
<Link to={`/product/${product.id}`} className="btn btn-small">
|
|
View Details
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|