55 lines
1.8 KiB
JavaScript
55 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import styles from './ProductCard.module.css';
|
|
|
|
const ProductCard = ({ product, onCardClick, isCenter, canHover, onCollapse }) => {
|
|
return (
|
|
<div
|
|
className={`${styles.card} ${isCenter ? styles.isCenter : ''} ${canHover ? styles.canHover : ''}`}
|
|
>
|
|
<img
|
|
src={product.image}
|
|
alt={product.name}
|
|
className={styles.cover}
|
|
onError={(e) => { e.currentTarget.src = '/assets/images/placeholder-product.png'; }}
|
|
/>
|
|
|
|
<div
|
|
className={styles.overlay}
|
|
onClick={(e) => {
|
|
// Collapse overlay when clicking on the overlay background (not buttons)
|
|
if (isCenter && canHover && onCollapse) {
|
|
// Check if the click target is the overlay itself, not a button
|
|
if (e.target === e.currentTarget) {
|
|
e.stopPropagation();
|
|
onCollapse();
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<div className={styles.overlayInner}>
|
|
<h3 className={styles.title}>{product.name}</h3>
|
|
<div className={styles.meta}>
|
|
<p className={styles.description}>{product.description}</p>
|
|
<div className={styles.buttonGroup}>
|
|
<button
|
|
className={styles.detailButton}
|
|
onClick={(e) => { e.preventDefault(); e.stopPropagation(); onCardClick && onCardClick(product, true); }}
|
|
>
|
|
Detail
|
|
</button>
|
|
<button
|
|
className={styles.buyButton}
|
|
onClick={(e) => { e.preventDefault(); e.stopPropagation(); onCardClick && onCardClick(product); }}
|
|
>
|
|
Beli
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProductCard;
|