74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import React from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import type { FoodItem } from '../types';
|
||
import { useCart } from '../contexts/CartContext';
|
||
import './ItemCard.css';
|
||
|
||
interface ItemCardProps {
|
||
item: FoodItem;
|
||
isLast?: boolean;
|
||
}
|
||
|
||
const ItemCard: React.FC<ItemCardProps> = ({ item, isLast }) => {
|
||
const navigate = useNavigate();
|
||
const { addToCart, updateQuantity, getItemQuantity } = useCart();
|
||
const quantity = getItemQuantity(item.id);
|
||
const isLimitReached = item.stock !== undefined && quantity >= item.stock && item.stock > 0;
|
||
|
||
return (
|
||
<div
|
||
className={`item-card ${isLast ? 'last' : ''} ${item.stock === 0 ? 'out-of-stock' : ''} ${isLimitReached ? 'limit-reached' : ''}`}
|
||
onClick={() => navigate(`/item/${item.id}`)}
|
||
>
|
||
<div className="item-info">
|
||
<div className="item-labels">
|
||
<div className={`veg-icon ${item.isVeg ? 'veg' : 'non-veg'}`}>
|
||
<div className="dot" />
|
||
</div>
|
||
{item.isPopular && <span className="bestseller-badge">Popular</span>}
|
||
{item.stock === 0 && <span className="out-of-stock-badge">Out of Stock</span>}
|
||
{isLimitReached && <span className="limit-badge">Only {item.stock} left</span>}
|
||
</div>
|
||
|
||
<h3 className="item-name">{item.name}</h3>
|
||
<p className="item-price">R{item.price.toFixed(2)}</p>
|
||
|
||
<p className="item-description">{item.description}</p>
|
||
</div>
|
||
|
||
<div className="item-image-container" onClick={(e) => e.stopPropagation()}>
|
||
{item.image ? (
|
||
<img src={item.image} alt={item.name} className="item-image" />
|
||
) : (
|
||
<div className="item-image-placeholder">
|
||
<span className="placeholder-icon">🍲</span>
|
||
</div>
|
||
)}
|
||
|
||
<div className="add-to-cart-container">
|
||
{quantity === 0 ? (
|
||
<button
|
||
className="add-button"
|
||
onClick={() => addToCart(item)}
|
||
disabled={item.stock === 0}
|
||
>
|
||
{item.stock === 0 ? 'SOLD OUT' : 'ADD'}
|
||
</button>
|
||
) : (
|
||
<div className={`quantity-controls ${isLimitReached ? 'at-limit' : ''}`}>
|
||
<button onClick={() => updateQuantity(item.id, -1)}>−</button>
|
||
<span className="quantity">{quantity}</span>
|
||
<button
|
||
onClick={() => addToCart(item)}
|
||
className={isLimitReached ? 'disabled' : ''}
|
||
>+</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ItemCard;
|