42 lines
1.5 KiB
JavaScript
42 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import { FaPlus, FaMinus } from 'react-icons/fa';
|
|
|
|
export default function CartItem({ item, onIncrement, onDecrement }) {
|
|
const product = item?.product || {};
|
|
|
|
return (
|
|
<div className="flex items-center justify-between bg-gray-200 rounded-lg p-2 mb-2 shadow">
|
|
<div className="flex flex-col">
|
|
<p className="font-semibold text-gray-800 max-w-[14rem] truncate">
|
|
{product.name || 'Unbekanntes Produkt'}
|
|
</p>
|
|
<p className="text-sm text-gray-600">
|
|
€{((product.price_cents ?? 0) / 100).toFixed(2).replace('.', ',')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => onDecrement(product.id)}
|
|
className="bg-red-600 hover:bg-red-500 text-white w-10 h-10 flex items-center justify-center rounded"
|
|
aria-label="Menge verringern"
|
|
type="button"
|
|
>
|
|
<FaMinus className="text-lg" />
|
|
</button>
|
|
<span className="font-semibold text-xl text-gray-800 min-w-6 text-center">
|
|
{item.quantity}
|
|
</span>
|
|
<button
|
|
onClick={() => onIncrement(product.id)}
|
|
className="bg-green-600 hover:bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded"
|
|
aria-label="Menge erhöhen"
|
|
type="button"
|
|
>
|
|
<FaPlus className="text-lg" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|