initial commit

apps/frontend/src/components/CartItem.jsx

@@ -0,0 +1,41 @@
+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>
+  );
+}