65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { useCompareStore } from '@/lib/compare-store';
|
|
import { X, GitCompare } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
export function CompareBar() {
|
|
const { items, removeItem, clearAll } = useCompareStore();
|
|
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-border shadow-lg">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<GitCompare className="size-4 text-accent" />
|
|
<span className="text-sm font-semibold text-primary hidden sm:block">
|
|
Porównaj ({items.length}/3)
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 flex-1 overflow-x-auto">
|
|
{items.map((item) => (
|
|
<div key={item.slug} className="flex items-center gap-2 bg-slate-50 rounded-lg px-3 py-1.5 border border-border shrink-0">
|
|
<div className="relative size-8 bg-white rounded">
|
|
<Image src={item.image} alt={item.name} fill className="object-contain p-0.5" unoptimized={item.image.startsWith('http')} />
|
|
</div>
|
|
<div className="hidden sm:block">
|
|
<p className="text-xs font-medium text-primary line-clamp-1 max-w-[140px]">{item.name}</p>
|
|
{item.price && <p className="text-xs text-accent font-bold">{item.price.toLocaleString('pl-PL')} zł</p>}
|
|
</div>
|
|
<button onClick={() => removeItem(item.slug)} className="text-text-muted hover:text-primary transition-colors ml-1">
|
|
<X className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
|
|
{/* Puste sloty */}
|
|
{Array.from({ length: 3 - items.length }).map((_, i) => (
|
|
<div key={i} className="size-11 rounded-lg border-2 border-dashed border-border flex items-center justify-center text-text-muted shrink-0">
|
|
<span className="text-lg">+</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
{items.length >= 2 && (
|
|
<Link href="/porownaj" className="btn btn-primary text-white font-bold text-sm py-2 px-4">
|
|
|
|
Porównaj
|
|
|
|
</Link>
|
|
)}
|
|
<button onClick={clearAll} className="text-xs text-text-muted hover:text-primary transition-colors">
|
|
Wyczyść
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|