100 lines
4.0 KiB
TypeScript
100 lines
4.0 KiB
TypeScript
"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">
|
|
{/* Usuń pozycję */}
|
|
<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>
|
|
|
|
{/* Obraz */}
|
|
<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>
|
|
|
|
{/* Treść */}
|
|
<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>
|
|
|
|
{/* Opcja Montażu i Cena jednostkowa */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-end gap-4 mt-4">
|
|
{/* Ilość i Cena */}
|
|
<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>
|
|
);
|
|
}
|