initial commit

2025-01-24 20:05:48 +01:00
commit db55c10f43
484 changed files with 118165 additions and 0 deletions
@@ -0,0 +1,106 @@
+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"
+                  >
+                    &#x2715;
+                  </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>
+  );
+}