undefined
107 lines
3.9 KiB
React
107 lines
3.9 KiB
React
import { Dialog, Transition } from "@headlessui/react";
|
|
import React, { Fragment, useState } from "react";
|
|
import Swiper from "swiper";
|
|
import { SwiperSlide, Swiper as SwiperComponent } from "swiper/react";
|
|
import { Navigation, Pagination, A11y } from "swiper";
|
|
|
|
export default function PropertyImageSlider({ modalOpen, closeModal, spaceImages }) {
|
|
const [currentImageSlide, setCurrentImageSlide] = useState(0);
|
|
|
|
return (
|
|
<Transition
|
|
appear
|
|
show={modalOpen}
|
|
as={Fragment}
|
|
>
|
|
<Dialog
|
|
as="div"
|
|
className="relative z-50"
|
|
onClose={closeModal}
|
|
>
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
|
</Transition.Child>
|
|
|
|
<div className="fixed inset-0 overflow-y-auto">
|
|
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0 scale-95"
|
|
enterTo="opacity-100 scale-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100 scale-100"
|
|
leaveTo="opacity-0 scale-95"
|
|
>
|
|
<Dialog.Panel
|
|
as="div"
|
|
className="bg-white p-5 rounded-lg md:w-4/5 w-5/6 transform overflow-hidden shadow-xl transition-all"
|
|
>
|
|
<div className="flex justify-between md:mb-[24px] mb-4">
|
|
<div></div>
|
|
{spaceImages.length > 0 ?
|
|
<p className="self-center normal-case">
|
|
Images {currentImageSlide + 1} of {spaceImages.length}
|
|
</p>
|
|
:
|
|
<p className="self-center normal-case">
|
|
No approved images to preview
|
|
</p>
|
|
}
|
|
<button
|
|
onClick={closeModal}
|
|
className="p-1 border hover:bg-gray-200 active:bg-gray-300 duration-100 px-3 text-2xl font-normal rounded-full"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
<div className="">
|
|
<SwiperComponent
|
|
// install Swiper modules
|
|
modules={[Navigation, Pagination, A11y]}
|
|
spaceBetween={50}
|
|
slidesPerView={1}
|
|
loop={true}
|
|
navigation
|
|
pagination={{
|
|
clickable: true,
|
|
renderBullet: (i, className) => `<img src="${spaceImages[i].photo_url || "/default-property.jpg"}" draggable="false" class="pagination-imag ${className}" />`,
|
|
}}
|
|
className="property-swiper-slid"
|
|
>
|
|
{spaceImages.map((img, i) => (
|
|
<SwiperSlide
|
|
key={i}
|
|
className="md:pb-[120px]"
|
|
>
|
|
{({ isActive }) => {
|
|
if (isActive) setCurrentImageSlide(i);
|
|
return (
|
|
<img
|
|
src={img?.photo_url || "/default-property.jpg"}
|
|
draggable={"false"}
|
|
className="w-full property-swiper-image md:h-[600px] h-[300px]"
|
|
/>
|
|
);
|
|
}}
|
|
</SwiperSlide>
|
|
))}
|
|
</SwiperComponent>
|
|
</div>
|
|
</Dialog.Panel>
|
|
</Transition.Child>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
);
|
|
}
|