nestiq-component-library 1.0.24 → 1.0.26

package/src/components/ImageListPopup/ImageListPopup.css

@@ -1,107 +1,107 @@
-.popup-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 10000;
-}
-
-.popup-container {
-  background-color: transparent;
-  border-radius: 8px;
-  max-width: 90%;
-  max-height: 90%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-
-.popup-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  padding: 1rem;
-  position: absolute;
-  top: 0;
-}
-
-.popup-title {
-  color: white;
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.btn-close {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  background: none;
-  border: none;
-  color: white;
-  font-size: 24px;
-  cursor: pointer;
-}
-
-.popup-body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem;
-  position: relative;
-  flex: 1;
-}
-
-.main-image {
-  max-width: 100%;
-  max-height: 80vh;
-  border-radius: 8px;
-}
-
-.btn-prev,
-.btn-next {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 48px;
-  cursor: pointer;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.btn-prev {
-  left: 10px;
-}
-
-.btn-next {
-  right: 10px;
-}
-
-.popup-thumbnails {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  padding: 1rem;
-}
-
-.thumbnail {
-  width: 60px;
-  height: 60px;
-  object-fit: cover;
-  border-radius: 8px;
-  cursor: pointer;
-  opacity: 0.6;
-}
-
-.thumbnail.active {
-  border: 2px solid white;
-  opacity: 1;
-}
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+}
+
+.popup-container {
+  background-color: transparent;
+  border-radius: 8px;
+  max-width: 90%;
+  max-height: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.popup-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+  position: absolute;
+  top: 0;
+}
+
+.popup-title {
+  color: white;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.btn-close {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.popup-body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  position: relative;
+  flex: 1;
+}
+
+.main-image {
+  max-width: 100%;
+  max-height: 80vh;
+  border-radius: 8px;
+}
+
+.btn-prev,
+.btn-next {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 48px;
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.btn-prev {
+  left: 10px;
+}
+
+.btn-next {
+  right: 10px;
+}
+
+.popup-thumbnails {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  padding: 1rem;
+}
+
+.thumbnail {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 8px;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.thumbnail.active {
+  border: 2px solid white;
+  opacity: 1;
+}

package/src/components/ImageListPopup/ImageListPopup.tsx

@@ -1,212 +1,141 @@
-import "./ImageListPopup.css";
-import React, { useEffect, useRef, useState } from "react";
-// import icon_checkmark from "../../../assets/Images/icon_checkmark.svg";
-import blcIconArrowRight from "../../assets/Images/blackarrow-Right.svg";
-import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
-import iconClose from "../../assets/images/icon_close_2.png";
-
-interface PopupProps {
-  property: {
-    city: string;
-    constructedArea: string;
-    rooms: string;
-    propertyArea: string;
-    askingPrice: string;
-  };
-  handleArrowClickInMainImage: any;
-  pictureUrls: any[];
-  currentImageIndex: number;
-  imageListRef: any;
-}
-
-export default function ImageListPopup(props: PopupProps) {
-  const [showPopUp, setShowPopUp] = useState(true);
-  // const { id } = useParams();
-  const [mainImage, setMainImage] = useState(null);
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
-  // const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
-  const imageListRef = useRef(null);
-
-  // const baseUrl = "https://api-dev.nestiq.de";
-  // const pictureUrls = props.property.pictures.map(
-  //   (picture) => `${baseUrl}${picture.contentUrl}`
-  // );
-  const imagePopupData = props.pictureUrls.map((pic) => {
-    return {
-      src: pic,
-      title: "Not Specified",
-    };
-  });
-
-  useEffect(() => {
-    if (props.pictureUrls.length > 0) {
-      setMainImage(props.pictureUrls[0]);
-    }
-  }, [props.pictureUrls]);
-
-  const handleArrowClickInMainImage = (direction: any) => {
-    if (!props.property || props.pictureUrls.length === 0) return;
-
-    let newIndex = currentImageIndex;
-    if (direction === "left") {
-      newIndex =
-        (currentImageIndex - 1 + props.pictureUrls.length) %
-        props.pictureUrls.length;
-    } else if (direction === "right") {
-      newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
-    }
-
-    setCurrentImageIndex(newIndex);
-    setMainImage(props.pictureUrls[newIndex]);
-
-    props.imageListRef.current.scrollTo({
-      left: newIndex * 150,
-      behavior: "smooth",
-    });
-  };
-
-  const handleClose = () => {
-    setShowPopUp(false);
-  };
-
-  return (
-    <div>
-      {showPopUp && (
-        <div className="popup-overlay">
-          <div className=" d-flex  flex-column  col-6 ">
-            <div className="d-flex  align-self-end me-0 ms-5">
-              <img
-                src={iconClose}
-                alt="close"
-                className="closeIcon  "
-                onClick={handleClose}
-              />
-            </div>
-
-            <div className="d-flex justify-content-center">
-              <div className="p-2 bd-highlight align-self-center align-items-center me-5">
-                <div
-                  className="rounded-circle border onImageArrow start-0 d-flex  "
-                  role="button"
-                  onClick={() => handleArrowClickInMainImage("left")}
-                >
-                  <img
-                    src={blcIconArrowLeft}
-                    className="blackArrow align-self-center"
-                    alt="Left Arrow"
-                  />
-                </div>
-              </div>
-              <div className="p-2 bd-highlight">
-                <div
-                  className=" rounded-5 mainImage "
-                  style={{
-                    backgroundImage: `url(${props.pictureUrls[currentImageIndex]})`,
-                    height: "350px",
-                    width: "600px",
-                    backgroundSize: "cover",
-                    backgroundPosition: "center",
-                  }}
-                ></div>
-              </div>
-              <div className="p-2 bd-highlight align-self-center ms-5">
-                {" "}
-                <div
-                  role="button"
-                  className="rounded-circle border onImageArrow d-flex     justify-content-center"
-                  onClick={() => handleArrowClickInMainImage("right")}
-                >
-                  <img
-                    src={blcIconArrowRight}
-                    className="blackArrow align-self-center"
-                    alt="Right Arrow"
-                  />
-                </div>
-              </div>
-            </div>
-            {/* <div className="d-flex flex-column">
-              <div className=" d-flex flex-row align-self-center ">
-                <img
-                  src={LeftArrow}
-                  alt="close"
-                  className="w-100 h-100 align-self-center me-5   "
-                />
-                <img src={house} alt="close" className="w-100 h-100    " />
-                <img
-                  src={RightArrow}
-                  alt="close"
-                  className="w-100 h-100  align-self-center ms-5  "
-                />
-              </div>
-            </div> */}
-            <div className="d-flex flex-row">
-              {/* Arrows on the main image */}
-            </div>
-            <div className="d-flex flex-row gap-4  w-100 secondList ">
-              <div className="col-lg-12 d-flex flex-row p-1  align-self-center mt-5">
-                <div className="col-12 position-relative d-flex justify-content-center">
-                  {/* <div
-                    className="col-1 h-100 d-flex position-absolute start-0"
-                    onClick={() => handleArrowClickInMainImage("left")}
-                    role="button"
-                  >
-                    <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                      <img
-                        src={iconArrowLeft}
-                        className="arroIconColour"
-                        alt="Left Arrow"
-                      />
-                    </div>
-                  </div> */}
-                  <div
-                    className="col-lg-10 rounded-3 h-100 w-100 d-flex flex-row gap-2 overflow-auto "
-                    ref={props.imageListRef}
-                  >
-                    {props.property && (
-                      <div className="col-lg-5 h-100 w-25 d-flex gap-4 flex-row rounded-3">
-                        {props.pictureUrls.map((imageUrl, index) => (
-                          <div
-                            key={index}
-                            className="col-lg-12 h-100 d-flex"
-                            onClick={() => {
-                              setMainImage(imageUrl);
-                              setCurrentImageIndex(index);
-                              props.imageListRef.current.scrollTo({
-                                left: index * 150,
-                                behavior: "smooth",
-                              });
-                            }}
-                            role="button"
-                          >
-                            <img
-                              src={imageUrl}
-                              alt={`Image ${index + 1}`}
-                              className="col-12 h-100 rounded-3 object-fit-cover"
-                            />
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                  {/* <div
-                    className="col-1 h-100 d-flex position-absolute end-0 top-0"
-                    onClick={() => handleArrowClickInMainImage("right")}
-                    role="button"
-                  >
-                    <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
-                      <img
-                        src={iconArrowRight}
-                        className="arroIconColour"
-                        alt="Right Arrow"
-                      />
-                    </div>
-                  </div> */}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+import "./ImageListPopup.css";
+import React, { useRef, useState } from "react";
+import blcIconArrowRight from "../../assets/Images/blackarrow-Right.svg";
+import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
+import iconClose from "../../assets/images/icon_close_2.png";
+
+interface PopupProps {
+  pictureUrls: { title: string; url: string }[];
+}
+
+export default function ImageListPopup(props: PopupProps) {
+  const [showPopUp, setShowPopUp] = useState(true);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const imageListRef = useRef<HTMLDivElement | null>(null);
+
+  const handleArrowClickInMainImage = (direction: any) => {
+    if (props.pictureUrls.length === 0) return;
+
+    let newIndex = currentImageIndex;
+    if (direction === "left") {
+      newIndex =
+        (currentImageIndex - 1 + props.pictureUrls.length) %
+        props.pictureUrls.length;
+    } else if (direction === "right") {
+      newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
+    }
+
+    setCurrentImageIndex(newIndex);
+
+    imageListRef.current!.scrollTo({
+      left: newIndex * 150,
+      behavior: "smooth",
+    });
+  };
+
+  const handleClose = () => {
+    setShowPopUp(false);
+  };
+
+  return (
+    <div>
+      {showPopUp && (
+        <div className="popup-overlay">
+          <div className=" d-flex  flex-column  col-6 ">
+            <span className="txt-white">
+              {props.pictureUrls[currentImageIndex].title}
+            </span>
+            <div className="d-flex  align-self-end me-0 ms-5">
+              <img
+                src={iconClose}
+                alt="close"
+                className="closeIcon"
+                onClick={handleClose}
+              />
+            </div>
+
+            <div className="d-flex justify-content-center">
+              <div className="p-2 bd-highlight align-self-center align-items-center me-5">
+                <div
+                  className="rounded-circle border onImageArrow start-0 d-flex  "
+                  role="button"
+                  onClick={() => handleArrowClickInMainImage("left")}
+                >
+                  <img
+                    src={blcIconArrowLeft}
+                    className="blackArrow align-self-center"
+                    alt="Left Arrow"
+                  />
+                </div>
+              </div>
+              <div className="p-2 bd-highlight">
+                <div
+                  className=" rounded-5 mainImage "
+                  style={{
+                    backgroundImage: `url(${props.pictureUrls[currentImageIndex].url})`,
+                    height: "350px",
+                    width: "600px",
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                  }}
+                ></div>
+              </div>
+              <div className="p-2 bd-highlight align-self-center ms-5">
+                {" "}
+                <div
+                  role="button"
+                  className="rounded-circle border onImageArrow d-flex     justify-content-center"
+                  onClick={() => handleArrowClickInMainImage("right")}
+                >
+                  <img
+                    src={blcIconArrowRight}
+                    className="blackArrow align-self-center"
+                    alt="Right Arrow"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="d-flex flex-row">
+              {/* Arrows on the main image */}
+            </div>
+            <div className="d-flex flex-row gap-4  w-100 secondList ">
+              <div className="col-lg-12 d-flex flex-row p-1  align-self-center mt-5">
+                <div className="col-12 position-relative d-flex justify-content-center">
+                  <div
+                    className="col-lg-10 rounded-3 h-100 w-100 d-flex flex-row gap-2 overflow-auto "
+                    ref={imageListRef}
+                  >
+                    {props.pictureUrls.length > 0 && (
+                      <div className="col-lg-5 h-100 w-25 d-flex gap-4 flex-row rounded-3">
+                        {props.pictureUrls.map((picture, index) => (
+                          <div
+                            key={index}
+                            className="col-lg-12 h-100 d-flex"
+                            onClick={() => {
+                              setCurrentImageIndex(index);
+                              imageListRef.current!.scrollTo({
+                                left: index * 150,
+                                behavior: "smooth",
+                              });
+                            }}
+                            role="button"
+                          >
+                            <img
+                              src={picture.url}
+                              alt={`Image ${index + 1}`}
+                              className="col-12 h-100 rounded-3 object-fit-cover"
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/Popup/Popup.tsx

@@ -1,28 +1,28 @@
-import React from "react";
-import closeIcon from "../../assets/images/icon_close_2.png";
-import "./Popup.css";
-
-interface PopupProps {
-  children: React.ReactNode;
-  onCloseClick: () => void;
-}
-
-const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
-  return (
-    <div className="popup-overlay">
-      <div className="shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
-        <div className="end-0 top-0 position-absolute ">
-          <img
-            src={closeIcon}
-            alt="close"
-            className="closeIcon me-2"
-            onClick={onCloseClick}
-          />
-        </div>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default Popup;
+import React from "react";
+import closeIcon from "../../assets/images/icon_close_2.png";
+import "./Popup.css";
+
+interface PopupProps {
+  children: React.ReactNode;
+  onCloseClick: () => void;
+}
+
+const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
+  return (
+    <div className="popup-overlay">
+      <div className="shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
+        <div className="end-0 top-0 position-absolute ">
+          <img
+            src={closeIcon}
+            alt="close"
+            className="closeIcon me-2"
+            onClick={onCloseClick}
+          />
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Popup;