92 lines
4.8 KiB
TypeScript
92 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
import { useCompare } from "@/context/CompareContext";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export default function CompareBar() {
|
|
const { compareList, removeFromCompare, clearCompare } = useCompare();
|
|
|
|
if (compareList.length === 0) return null;
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-gray-900 border-t-2 border-primary shadow-2xl">
|
|
<div className="max-w-7xl mx-auto px-6 py-4">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-4 flex-1 overflow-x-auto hide-scrollbar">
|
|
<div className="flex items-center gap-2 flex-shrink-0">
|
|
<svg
|
|
className="w-7 h-7 text-primary"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M4 7h11m0 0l-4-4m4 4l-4 4M20 17H9m0 0l4-4m-4 4l4 4"
|
|
/>
|
|
</svg>
|
|
|
|
<span className="font-semibold text-foreground">Compare Properties ({compareList.length}/4)</span>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-3 pr-3">
|
|
{compareList.map((property) => (
|
|
<div key={property.id} className="relative group flex-shrink-0">
|
|
<div className="w-20 h-20 rounded-lg overflow-hidden border-2 border-gray-200 dark:border-gray-700">
|
|
<Image
|
|
src={property.image}
|
|
alt={property.title}
|
|
width={80}
|
|
height={80}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={() => removeFromCompare(property.id)}
|
|
className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors shadow-md"
|
|
aria-label="Remove from comparison"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
<div className="absolute bottom-0 left-0 right-0 bg-black/70 text-white text-xs p-1 text-center truncate opacity-0 group-hover:opacity-100 transition-opacity">
|
|
{property.title}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 flex-shrink-0">
|
|
<button
|
|
onClick={clearCompare}
|
|
className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors font-medium"
|
|
>
|
|
Clear All
|
|
</button>
|
|
<Link
|
|
href="/compare"
|
|
className={`px-6 py-3 rounded-lg font-semibold transition-all ${compareList.length >= 2
|
|
? "bg-primary text-white hover:bg-blue-700 shadow-lg hover:shadow-xl"
|
|
: "bg-gray-300 text-gray-500 cursor-not-allowed"
|
|
}`}
|
|
onClick={(e) => {
|
|
if (compareList.length < 2) {
|
|
e.preventDefault();
|
|
alert("Please select at least 2 properties to compare");
|
|
}
|
|
}}
|
|
>
|
|
Compare Now
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|