Zastosowanie wszystkich poprawek UI i logiki kalkulatora

2026-08-10 23:26:52 +02:00
commit 7324a6f800
218 changed files with 33628 additions and 0 deletions
@@ -0,0 +1,94 @@
+"use client";
+
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useCartStore } from '@/lib/cart-store';
+import { formatCurrency } from '@/lib/utils';
+import { Minus, Plus, Trash2 } from 'lucide-react';
+
+export function CartItems() {
+  const { items, removeItem, updateQuantity } = useCartStore();
+
+  if (items.length === 0) {
+    return (
+      <div className="bg-white p-12 rounded-2xl border border-border text-center">
+        <div className="w-20 h-20 bg-slate-50 text-slate-300 rounded-full flex items-center justify-center mx-auto mb-6">
+          <Trash2 className="w-10 h-10" />
+        </div>
+        <h2 className="text-2xl font-bold text-primary font-heading mb-4">Twój koszyk jest pusty</h2>
+        <p className="text-text-muted mb-8">Nie dodałeś jeszcze żadnych produktów do koszyka.</p>
+        <Link href="/sklep" className="inline-flex bg-cta hover:bg-cta-hover text-white font-bold py-3 px-8 rounded-xl transition-colors">
+          Przejdź do sklepu
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {items.map((item) => {
+        const itemPrice = item.price;
+        const totalGross = itemPrice * item.quantity;
+
+        return (
+          <div key={item.id} className="bg-white p-6 rounded-2xl border border-border flex flex-col sm:flex-row gap-6 relative">
+            <button 
+              onClick={() => removeItem(item.id)}
+              className="absolute top-4 right-4 p-2 text-text-muted hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+              aria-label="Usuń z koszyka"
+            >
+              <Trash2 className="w-5 h-5" />
+            </button>
+
+            <div className="relative w-24 h-24 sm:w-32 sm:h-32 shrink-0 bg-slate-50 rounded-xl p-2 border border-border">
+              <Image
+                src={item.image}
+                alt={item.name}
+                fill
+                className="object-contain"
+              />
+            </div>
+
+            <div className="flex flex-col flex-grow justify-between">
+              <div>
+                <div className="text-xs font-bold text-text-muted uppercase tracking-wider mb-1">
+                  {item.brand}
+                </div>
+                <h3 className="text-lg font-bold text-primary font-heading leading-tight mb-2 pr-10">
+                  <Link href={`/sklep/${item.slug}`} className="hover:text-accent transition-colors">
+                    {item.name}
+                  </Link>
+                </h3>
+              </div>
+
+              <div className="flex flex-col sm:flex-row sm:items-center justify-end gap-4 mt-4">
+                <div className="flex items-center gap-6">
+                  <div className="flex items-center border border-border rounded-lg bg-slate-50">
+                    <button 
+                      onClick={() => updateQuantity(item.id, item.quantity - 1)}
+                      disabled={item.quantity <= 1}
+                      className="w-8 h-8 flex items-center justify-center text-text-muted hover:text-primary disabled:opacity-50"
+                    >
+                      <Minus className="w-4 h-4" />
+                    </button>
+                    <span className="w-8 text-center text-sm font-bold">{item.quantity}</span>
+                    <button 
+                      onClick={() => updateQuantity(item.id, item.quantity + 1)}
+                      className="w-8 h-8 flex items-center justify-center text-text-muted hover:text-primary"
+                    >
+                      <Plus className="w-4 h-4" />
+                    </button>
+                  </div>
+                  <div className="text-xl font-extrabold text-primary font-heading w-24 text-right">
+                    {formatCurrency(totalGross)}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}