105 lines
4.4 KiB
TypeScript
105 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import { useCompareStore } from '@/lib/compare-store';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { X, ShoppingCart } from 'lucide-react';
|
|
import { useCartStore } from '@/lib/cart-store';
|
|
|
|
export default function PorownajPage() {
|
|
const { items, removeItem } = useCompareStore();
|
|
const addToCart = useCartStore((s) => s.addItem);
|
|
|
|
if (items.length === 0) {
|
|
return (
|
|
<main className="min-h-screen bg-slate-50 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<p className="text-text-muted mb-4">Nie masz żadnych produktów do porównania.</p>
|
|
<Link href="/sklep" className="btn btn-primary text-white font-bold">
|
|
Wróć do sklepu
|
|
</Link>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
const allSpecKeys = [...new Set(items.flatMap((i) => Object.keys(i.specs)))];
|
|
|
|
return (
|
|
<main className="bg-slate-50 min-h-screen py-8">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<h1 className="text-2xl font-bold text-primary font-heading">Porównanie produktów</h1>
|
|
<Link href="/sklep" className="text-sm text-accent hover:underline">← Wróć do sklepu</Link>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full bg-white rounded-xl border border-border overflow-hidden">
|
|
<thead>
|
|
<tr className="border-b border-border">
|
|
<td className="p-4 w-36 bg-slate-50" />
|
|
{items.map((item) => (
|
|
<td key={item.slug} className="p-4 text-center align-top border-l border-border">
|
|
<div className="relative mx-auto size-24 mb-3">
|
|
<Image
|
|
src={item.image}
|
|
alt={item.name}
|
|
fill
|
|
className="object-contain"
|
|
unoptimized={item.image.startsWith('http')}
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-accent font-semibold uppercase mb-1">{item.brand}</p>
|
|
<p className="text-sm font-bold text-primary font-heading leading-snug">{item.name}</p>
|
|
{item.price && (
|
|
<p className="text-lg font-bold text-primary mt-2">
|
|
{item.price.toLocaleString('pl-PL')} zł
|
|
</p>
|
|
)}
|
|
<div className="flex gap-2 mt-3 justify-center">
|
|
{item.price && (
|
|
<button
|
|
onClick={() => addToCart({
|
|
slug: item.slug,
|
|
name: item.name,
|
|
brand: item.brand,
|
|
image: item.image,
|
|
price: item.price!,
|
|
})}
|
|
className="flex items-center gap-1 px-3 py-1.5 bg-accent text-white rounded-lg text-xs font-bold hover:bg-accent/90 transition-colors"
|
|
>
|
|
<ShoppingCart className="size-3" /> Do koszyka
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => removeItem(item.slug)}
|
|
className="p-1.5 text-text-muted hover:text-primary border border-border rounded-lg transition-colors"
|
|
>
|
|
<X className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{allSpecKeys.map((key, idx) => (
|
|
<tr key={key} className={`border-b border-border ${idx % 2 === 0 ? 'bg-white' : 'bg-slate-50'}`}>
|
|
<td className="p-3 text-xs font-medium text-text-muted bg-slate-50 border-r border-border">
|
|
{key}
|
|
</td>
|
|
{items.map((item) => (
|
|
<td key={item.slug} className="p-3 text-sm text-primary text-center border-l border-border">
|
|
{item.specs[key] || <span className="text-border">—</span>}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|