81 lines
3.7 KiB
JavaScript
81 lines
3.7 KiB
JavaScript
|
import { motion } from "framer-motion";
|
||
|
|
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import PropertyMapWithMarkers from "../PropertyMapWithMarkers";
|
||
|
|
export default function MapSection({ mapSectionRef, isScrolling, resetSearch, filteredProperties }) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<motion.section
|
||
|
|
ref={mapSectionRef}
|
||
|
|
initial={{ opacity: 0, y: 50 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
exit={{ opacity: 0, y: -50 }}
|
||
|
|
transition={{
|
||
|
|
type: "spring",
|
||
|
|
damping: 20,
|
||
|
|
stiffness: 100,
|
||
|
|
duration: 0.6,
|
||
|
|
}}
|
||
|
|
className="py-12 bg-gray-50 relative"
|
||
|
|
>
|
||
|
|
{isScrolling && <motion.div className="absolute top-0 left-0 right-0 h-1 bg-amber-500 z-10" initial={{ scaleX: 0 }} animate={{ scaleX: 1 }} transition={{ duration: 1, ease: "easeInOut" }} />}
|
||
|
|
|
||
|
|
<div className="container mx-auto px-4">
|
||
|
|
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }} className="text-center mb-8">
|
||
|
|
<div className="flex items-center justify-center gap-4 mb-2">
|
||
|
|
<h2 className="text-3xl font-bold text-gray-900">{filteredProperties.length > 0 ? t("searchResults") : t("no-properties")}</h2>
|
||
|
|
<motion.button
|
||
|
|
onClick={resetSearch}
|
||
|
|
className="px-4 py-2 bg-white border border-gray-300 rounded-full text-sm font-medium text-gray-700 hover:bg-gray-50 shadow-sm flex items-center gap-2"
|
||
|
|
whileHover={{ scale: 1.05 }}
|
||
|
|
whileTap={{ scale: 0.95 }}
|
||
|
|
>
|
||
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||
|
|
</svg>
|
||
|
|
{t("newSearch")}
|
||
|
|
</motion.button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{filteredProperties.length > 0 ? (
|
||
|
|
<p className="text-gray-600">{t("foundPropertiesCount", { count: filteredProperties.length })}</p>
|
||
|
|
) : (
|
||
|
|
<p className="text-gray-600">{t("noPropertiesMatchFilters")}</p>
|
||
|
|
)}
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200"
|
||
|
|
initial={{ scale: 0.95, opacity: 0 }}
|
||
|
|
animate={{ scale: 1, opacity: 1 }}
|
||
|
|
transition={{ delay: 0.3, type: "spring" }}
|
||
|
|
>
|
||
|
|
{filteredProperties.length > 0 ? (
|
||
|
|
<PropertyMapWithMarkers
|
||
|
|
properties={filteredProperties.map((p) => ({
|
||
|
|
...p,
|
||
|
|
lat: p.location.lat,
|
||
|
|
lng: p.location.lng,
|
||
|
|
address: p.location.address,
|
||
|
|
}))}
|
||
|
|
onPropertyClick={() => {}}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<div className="h-[400px] flex flex-col items-center justify-center bg-gray-50">
|
||
|
|
<div className="w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center mb-4">
|
||
|
|
<svg className="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3 className="text-xl font-bold text-gray-700 mb-2">{t("no-properties")}</h3>
|
||
|
|
<p className="text-gray-500">{t("try-changing-search-criteria")}</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</motion.section>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|