diff --git a/src/components/maps/PropertyDetailDrawer.jsx b/src/components/maps/PropertyDetailDrawer.jsx index 823754e..53d0349 100644 --- a/src/components/maps/PropertyDetailDrawer.jsx +++ b/src/components/maps/PropertyDetailDrawer.jsx @@ -33,6 +33,8 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load // Lightbox State const [lightboxIndex, setLightboxIndex] = useState(null); // null = closed, number = open at index + const [touchStart, setTouchStart] = useState(null); + const [touchEnd, setTouchEnd] = useState(null); const panelRef = useRef(null); const closeButtonRef = useRef(null); @@ -206,6 +208,29 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load if (data) setIsEditing(false); }; + // Swipe Logic for Lightbox + const handleTouchStart = (e) => { + setTouchEnd(null); + setTouchStart(e.targetTouches[0].clientX); + }; + + const handleTouchMove = (e) => { + setTouchEnd(e.targetTouches[0].clientX); + }; + + const handleTouchEnd = () => { + if (!touchStart || !touchEnd) return; + const distance = touchStart - touchEnd; + const isLeftSwipe = distance > 50; + const isRightSwipe = distance < -50; + + if (isLeftSwipe) { + setLightboxIndex((prev) => (prev + 1) % photos.length); + } else if (isRightSwipe) { + setLightboxIndex((prev) => (prev - 1 + photos.length) % photos.length); + } + }; + // Photo Logic const handleUploadPhoto = (e) => { const file = e.target.files[0]; @@ -624,11 +649,14 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load {/* LIGHTBOX OVERLAY */} {lightboxIndex !== null && photos[lightboxIndex] && (
{/* Close Button */} {/* Main Image */} @@ -664,17 +692,12 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load {/* Navigation Right */} - {/* Mobile Navigation Hints (Optional) */} -
- ← Swipe Left - Swipe Right → -
)}