79 lines
3.3 KiB
TypeScript
79 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { usePathname } from 'next/navigation';
|
|
import { GitCompare, X } from 'lucide-react';
|
|
import { useCartStore } from '@/store/cartStore';
|
|
import { getImageUrl } from '@/lib/utils';
|
|
import { COMPARE_LIMIT } from '@/lib/compare';
|
|
|
|
export function CompareBar() {
|
|
const pathname = usePathname();
|
|
const compareList = useCartStore((s) => s.compareList) || [];
|
|
const removeFromCompare = useCartStore((s) => s.removeFromCompare);
|
|
const clearCompare = useCartStore((s) => s.clearCompare);
|
|
const hydrated = useCartStore((s) => s._hasHydrated);
|
|
|
|
if (!hydrated || pathname === '/compare' || compareList.length === 0) return null;
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-[90] border-t border-gray-200 bg-white/95 backdrop-blur-md shadow-[0_-12px_40px_rgba(16,24,40,0.12)]">
|
|
<div className="max-w-7xl mx-auto px-4 py-3 flex items-center gap-4">
|
|
<div className="hidden md:flex items-center gap-2 shrink-0">
|
|
<div className="w-9 h-9 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
|
|
<GitCompare className="w-4 h-4" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[13px] font-bold text-gray-900 leading-tight">Compare</p>
|
|
<p className="text-[11px] text-gray-500">
|
|
{compareList.length} of {COMPARE_LIMIT} selected
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 flex items-center gap-2 overflow-x-auto">
|
|
{compareList.map((product) => {
|
|
const img = getImageUrl(product.images?.[0]?.image_url);
|
|
return (
|
|
<div
|
|
key={product.product_id}
|
|
className="relative flex items-center gap-2 pl-1 pr-7 py-1 rounded-lg border border-gray-200 bg-[#f8fafc] shrink-0 max-w-[180px]"
|
|
title={product.name}
|
|
>
|
|
<div className="relative w-9 h-9 rounded-md bg-white overflow-hidden shrink-0">
|
|
{img ? (
|
|
<Image src={img} alt="" fill className="object-contain p-0.5" unoptimized />
|
|
) : null}
|
|
</div>
|
|
<p className="text-[11px] font-semibold text-gray-800 line-clamp-2 leading-tight">
|
|
{product.name}
|
|
</p>
|
|
<button
|
|
type="button"
|
|
aria-label={`Remove ${product.name}`}
|
|
onClick={() => removeFromCompare(product.product_id)}
|
|
className="absolute top-1 right-1 w-4 h-4 rounded-full bg-gray-800 text-white flex items-center justify-center cursor-pointer"
|
|
>
|
|
<X className="w-2.5 h-2.5" />
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => clearCompare()}
|
|
className="hidden sm:inline text-[12px] font-semibold text-gray-500 hover:text-gray-800 cursor-pointer"
|
|
>
|
|
Clear
|
|
</button>
|
|
<Link
|
|
href="/compare"
|
|
className="shrink-0 h-10 px-5 rounded-lg bg-primary text-white text-[13px] font-bold inline-flex items-center justify-center hover:brightness-95"
|
|
>
|
|
{compareList.length < 2 ? 'Open compare' : 'Compare now'}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|