diff options
Diffstat (limited to 'src/components/ProductCard.js')
| -rw-r--r-- | src/components/ProductCard.js | 9 |
1 files changed, 6 insertions, 3 deletions
diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js index 77f902e0..23cc0665 100644 --- a/src/components/ProductCard.js +++ b/src/components/ProductCard.js @@ -10,8 +10,11 @@ export default function ProductCard({ data }) { let product = data; return ( <div className="product-card"> - <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block"> + <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block relative"> <LazyLoadImage effect="blur" src={product.image ? product.image : '/images/noimage.jpeg'} alt={product.name} className="product-card__image" /> + {product.variant_total > 1 ? ( + <div className="absolute bottom-2 left-2 badge-yellow">{product.variant_total} Varian</div> + ) : ''} </Link> <div className="product-card__description"> <div> @@ -24,7 +27,7 @@ export default function ProductCard({ data }) { {product.name} </Link> </div> - <div className="flex-1 mt-2"> + <div className="mt-2"> {product.lowest_price.discount_percentage > 0 ? ( <div className="flex gap-x-1 items-center"> <span className="badge-yellow">{product.lowest_price.discount_percentage}%</span> @@ -41,7 +44,7 @@ export default function ProductCard({ data }) { </a> )} {product.stock_total > 0 ? ( - <div className="badge-yellow bg-green-200 text-green-700 w-fit mt-2">Ready Stock</div> + <div className="badge-green mt-2">Ready Stock {product.stock_total > 5 ? '> 5' : '< 5'}</div> ) : ''} </div> </div> |