nestiq-component-library 1.0.9 → 1.0.12

package/dist/assets/images/blackarrow-Right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
+</svg>

package/dist/assets/images/blckarrow-Left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
+</svg>

package/dist/assets/images/locationIconBlack.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
+  <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10"/>
+  <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
+</svg>

package/dist/components/PropertyDetailsHeader/PropertyDetailsHeader.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./PropertyDetailsHeader.css";
+interface PopupProps {
+    property: {
+        city: string;
+        price: string;
+    };
+}
+export default function PropertyDetailsHeader(props: PopupProps): React.JSX.Element;
+export {};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Button } from "./components/Button/Button";
 export { default as Popup } from "./components/Popup/Popup";
 export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
+export { default as PropertyDetailsHeader } from "./components/PropertyDetailsHeader/PropertyDetailsHeader";

package/dist/index.es.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import closeIcon from 'src/assets/images/icon_close 2.png';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 var Button = function (_a) {
@@ -7,6 +6,8 @@ var Button = function (_a) {
     return React.createElement("button", null, label);
 };
 
+var closeIcon = "icon_close_2.png";
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -34,8 +35,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1 = ".popup-overlay {\r\n    position: fixed; /* Fixed position to cover the whole screen */\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n    display: flex; /* Flexbox to center the popup */\r\n    justify-content: center; /* Center horizontally */\r\n    align-items: center; /* Center vertically */\r\n    z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n    height: 48px;\r\n    font-size: 32px;\r\n    font-weight: 600;\r\n    color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n    width: 16px;\r\n    height: 16px;\r\n    cursor: pointer;\r\n}\r\n";
-styleInject(css_248z$1);
+var css_248z$2 = ".popup-overlay {\r\n    position: fixed; /* Fixed position to cover the whole screen */\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n    display: flex; /* Flexbox to center the popup */\r\n    justify-content: center; /* Center horizontally */\r\n    align-items: center; /* Center vertically */\r\n    z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n    height: 48px;\r\n    font-size: 32px;\r\n    font-weight: 600;\r\n    color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n    width: 16px;\r\n    height: 16px;\r\n    cursor: pointer;\r\n}\r\n";
+styleInject(css_248z$2);
 
 var Popup = function (_a) {
     var onCloseClick = _a.onCloseClick, children = _a.children;
@@ -46,8 +47,12 @@ var Popup = function (_a) {
             children)));
 };
 
-var css_248z = ".popup-overlay {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n    background-color: #fff;\r\n    border-radius: 8px;\r\n    max-width: 90%;\r\n    max-height: 90%;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.popup-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 1rem;\r\n    border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.popup-body {\r\n    flex: 1;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 1rem;\r\n}\r\n\r\n.popup-body img {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n}\r\n\r\n.popup-footer {\r\n    padding: 1rem;\r\n    text-align: center;\r\n    border-top: 1px solid #ddd;\r\n}\r\n";
-styleInject(css_248z);
+var css_248z$1 = ".popup-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.7);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n  background-color: transparent;\r\n  border-radius: 8px;\r\n  max-width: 90%;\r\n  max-height: 90%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  position: relative;\r\n}\r\n\r\n.popup-header {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 1rem;\r\n  position: absolute;\r\n  top: 0;\r\n}\r\n\r\n.popup-title {\r\n  color: white;\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n}\r\n\r\n.btn-close {\r\n  position: absolute;\r\n  right: 1rem;\r\n  top: 1rem;\r\n  background: none;\r\n  border: none;\r\n  color: white;\r\n  font-size: 24px;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup-body {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 1rem;\r\n  position: relative;\r\n  flex: 1;\r\n}\r\n\r\n.main-image {\r\n  max-width: 100%;\r\n  max-height: 80vh;\r\n  border-radius: 8px;\r\n}\r\n\r\n.btn-prev,\r\n.btn-next {\r\n  background: none;\r\n  border: none;\r\n  color: white;\r\n  font-size: 48px;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.btn-prev {\r\n  left: 10px;\r\n}\r\n\r\n.btn-next {\r\n  right: 10px;\r\n}\r\n\r\n.popup-thumbnails {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 1rem;\r\n}\r\n\r\n.thumbnail {\r\n  width: 60px;\r\n  height: 60px;\r\n  object-fit: cover;\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n  opacity: 0.6;\r\n}\r\n\r\n.thumbnail.active {\r\n  border: 2px solid white;\r\n  opacity: 1;\r\n}\r\n";
+styleInject(css_248z$1);
+
+var blcIconArrowRight = "blackarrow-Right.svg";
+
+var blcIconArrowLeft = "blckarrow-Left.svg";
 
 var ImageListPopup = function (_a) {
     var images = _a.images, onClose = _a.onClose;
@@ -60,17 +65,45 @@ var ImageListPopup = function (_a) {
             return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
         });
     };
+    var handleThumbnailClick = function (index) {
+        setCurrentIndex(index);
+    };
     return (React.createElement("div", { className: "popup-overlay" },
         React.createElement("div", { className: "popup-container" },
             React.createElement("div", { className: "popup-header" },
-                React.createElement("span", null, images[currentIndex].title),
+                React.createElement("span", { className: "popup-title" }, images[currentIndex].title),
                 React.createElement("button", { className: "btn-close", onClick: onClose })),
             React.createElement("div", { className: "popup-body" },
-                React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
-            React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
-                React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
-                React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
+                React.createElement("div", { className: "rounded-circle border btn-prev", role: "button", onClick: handlePrevious },
+                    React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
+                React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "main-image" }),
+                React.createElement("div", { className: "rounded-circle border btn-next", role: "button", onClick: handleNext },
+                    React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
+            React.createElement("div", { className: "popup-thumbnails" }, images.map(function (image, index) { return (React.createElement("img", { key: index, src: image.src, alt: image.title, className: "thumbnail ".concat(index === currentIndex ? "active" : ""), onClick: function () { return handleThumbnailClick(index); } })); })))));
 };
 
-export { Button, ImageListPopup, Popup };
+var ShareIcon = "icon_share_1.svg";
+
+var locationIcon = "locationIconBlack.svg";
+
+var css_248z = ".compact {\r\n  height: 194px;\r\n  border-radius: 32px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: #f2f2f2;\r\n}\r\n\r\n.header_Text {\r\n  margin-top: 140px;\r\n  font-size: 32px;\r\n  line-height: normal;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.vector svg {\r\n  width: 16px;\r\n  height: 21.5px;\r\n  flex-grow: 0;\r\n  margin: 4.2px 10px 4.2px 0;\r\n  fill: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.propText {\r\n  height: 30px;\r\n  font-size: 16px;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #344041;\r\n}\r\n\r\n.v_share {\r\n  cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n  margin-top: 90px;\r\n  height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n  .Pheader {\r\n    max-width: 1750px;\r\n    margin: 0 auto;\r\n    \r\n  }\r\n}\r\n";
+styleInject(css_248z);
+
+function PropertyDetailsHeader(props) {
+    var _a = useState(false), showPopUp = _a[0], setShowPopUp = _a[1];
+    var handlePopUp = function () {
+        setShowPopUp(!showPopUp);
+    };
+    return (React.createElement("div", { className: "Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 " },
+        React.createElement("div", { className: "header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 " },
+            React.createElement("strong", null, "Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in top Lage")),
+        React.createElement("div", { className: "header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4" },
+            React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "vector me-2" }),
+            React.createElement("div", { className: "propText text-truncate col-lg-6 col-md-6 d-flex align-items-center" }, props.property.city)),
+        React.createElement("div", { className: "d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4" },
+            React.createElement("img", { src: ShareIcon, alt: "Location Icon", className: "v_share me-3", onClick: handlePopUp })),
+        React.createElement("div", { className: "fetch_section d-flex align-items-center flex-row col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0" })));
+}
+
+export { Button, ImageListPopup, Popup, PropertyDetailsHeader };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.es.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\""],"names":[],"mappings":";;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;ACzBA,wBAAe;;ACAf,uBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/dist/index.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-var closeIcon = require('src/assets/images/icon_close 2.png');
 require('bootstrap/dist/css/bootstrap.min.css');
 
 var Button = function (_a) {
@@ -9,6 +8,8 @@ var Button = function (_a) {
     return React.createElement("button", null, label);
 };
 
+var closeIcon = "icon_close_2.png";
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -36,8 +37,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1 = ".popup-overlay {\r\n    position: fixed; /* Fixed position to cover the whole screen */\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n    display: flex; /* Flexbox to center the popup */\r\n    justify-content: center; /* Center horizontally */\r\n    align-items: center; /* Center vertically */\r\n    z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n    height: 48px;\r\n    font-size: 32px;\r\n    font-weight: 600;\r\n    color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n    width: 16px;\r\n    height: 16px;\r\n    cursor: pointer;\r\n}\r\n";
-styleInject(css_248z$1);
+var css_248z$2 = ".popup-overlay {\r\n    position: fixed; /* Fixed position to cover the whole screen */\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n    display: flex; /* Flexbox to center the popup */\r\n    justify-content: center; /* Center horizontally */\r\n    align-items: center; /* Center vertically */\r\n    z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n    height: 48px;\r\n    font-size: 32px;\r\n    font-weight: 600;\r\n    color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n    width: 16px;\r\n    height: 16px;\r\n    cursor: pointer;\r\n}\r\n";
+styleInject(css_248z$2);
 
 var Popup = function (_a) {
     var onCloseClick = _a.onCloseClick, children = _a.children;
@@ -48,8 +49,12 @@ var Popup = function (_a) {
             children)));
 };
 
-var css_248z = ".popup-overlay {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n    background-color: #fff;\r\n    border-radius: 8px;\r\n    max-width: 90%;\r\n    max-height: 90%;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.popup-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 1rem;\r\n    border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.popup-body {\r\n    flex: 1;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 1rem;\r\n}\r\n\r\n.popup-body img {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n}\r\n\r\n.popup-footer {\r\n    padding: 1rem;\r\n    text-align: center;\r\n    border-top: 1px solid #ddd;\r\n}\r\n";
-styleInject(css_248z);
+var css_248z$1 = ".popup-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.7);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n  background-color: transparent;\r\n  border-radius: 8px;\r\n  max-width: 90%;\r\n  max-height: 90%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  position: relative;\r\n}\r\n\r\n.popup-header {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 1rem;\r\n  position: absolute;\r\n  top: 0;\r\n}\r\n\r\n.popup-title {\r\n  color: white;\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n}\r\n\r\n.btn-close {\r\n  position: absolute;\r\n  right: 1rem;\r\n  top: 1rem;\r\n  background: none;\r\n  border: none;\r\n  color: white;\r\n  font-size: 24px;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup-body {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 1rem;\r\n  position: relative;\r\n  flex: 1;\r\n}\r\n\r\n.main-image {\r\n  max-width: 100%;\r\n  max-height: 80vh;\r\n  border-radius: 8px;\r\n}\r\n\r\n.btn-prev,\r\n.btn-next {\r\n  background: none;\r\n  border: none;\r\n  color: white;\r\n  font-size: 48px;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.btn-prev {\r\n  left: 10px;\r\n}\r\n\r\n.btn-next {\r\n  right: 10px;\r\n}\r\n\r\n.popup-thumbnails {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 1rem;\r\n}\r\n\r\n.thumbnail {\r\n  width: 60px;\r\n  height: 60px;\r\n  object-fit: cover;\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n  opacity: 0.6;\r\n}\r\n\r\n.thumbnail.active {\r\n  border: 2px solid white;\r\n  opacity: 1;\r\n}\r\n";
+styleInject(css_248z$1);
+
+var blcIconArrowRight = "blackarrow-Right.svg";
+
+var blcIconArrowLeft = "blckarrow-Left.svg";
 
 var ImageListPopup = function (_a) {
     var images = _a.images, onClose = _a.onClose;
@@ -62,19 +67,48 @@ var ImageListPopup = function (_a) {
             return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
         });
     };
+    var handleThumbnailClick = function (index) {
+        setCurrentIndex(index);
+    };
     return (React.createElement("div", { className: "popup-overlay" },
         React.createElement("div", { className: "popup-container" },
             React.createElement("div", { className: "popup-header" },
-                React.createElement("span", null, images[currentIndex].title),
+                React.createElement("span", { className: "popup-title" }, images[currentIndex].title),
                 React.createElement("button", { className: "btn-close", onClick: onClose })),
             React.createElement("div", { className: "popup-body" },
-                React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
-            React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
-                React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
-                React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
+                React.createElement("div", { className: "rounded-circle border btn-prev", role: "button", onClick: handlePrevious },
+                    React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
+                React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "main-image" }),
+                React.createElement("div", { className: "rounded-circle border btn-next", role: "button", onClick: handleNext },
+                    React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
+            React.createElement("div", { className: "popup-thumbnails" }, images.map(function (image, index) { return (React.createElement("img", { key: index, src: image.src, alt: image.title, className: "thumbnail ".concat(index === currentIndex ? "active" : ""), onClick: function () { return handleThumbnailClick(index); } })); })))));
 };
 
+var ShareIcon = "icon_share_1.svg";
+
+var locationIcon = "locationIconBlack.svg";
+
+var css_248z = ".compact {\r\n  height: 194px;\r\n  border-radius: 32px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: #f2f2f2;\r\n}\r\n\r\n.header_Text {\r\n  margin-top: 140px;\r\n  font-size: 32px;\r\n  line-height: normal;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.vector svg {\r\n  width: 16px;\r\n  height: 21.5px;\r\n  flex-grow: 0;\r\n  margin: 4.2px 10px 4.2px 0;\r\n  fill: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.propText {\r\n  height: 30px;\r\n  font-size: 16px;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #344041;\r\n}\r\n\r\n.v_share {\r\n  cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n  margin-top: 90px;\r\n  height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n  .Pheader {\r\n    max-width: 1750px;\r\n    margin: 0 auto;\r\n    \r\n  }\r\n}\r\n";
+styleInject(css_248z);
+
+function PropertyDetailsHeader(props) {
+    var _a = React.useState(false), showPopUp = _a[0], setShowPopUp = _a[1];
+    var handlePopUp = function () {
+        setShowPopUp(!showPopUp);
+    };
+    return (React.createElement("div", { className: "Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 " },
+        React.createElement("div", { className: "header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 " },
+            React.createElement("strong", null, "Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in top Lage")),
+        React.createElement("div", { className: "header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4" },
+            React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "vector me-2" }),
+            React.createElement("div", { className: "propText text-truncate col-lg-6 col-md-6 d-flex align-items-center" }, props.property.city)),
+        React.createElement("div", { className: "d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4" },
+            React.createElement("img", { src: ShareIcon, alt: "Location Icon", className: "v_share me-3", onClick: handlePopUp })),
+        React.createElement("div", { className: "fetch_section d-flex align-items-center flex-row col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0" })));
+}
+
 exports.Button = Button;
 exports.ImageListPopup = ImageListPopup;
 exports.Popup = Popup;
+exports.PropertyDetailsHeader = PropertyDetailsHeader;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\""],"names":[],"mappings":";;;;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;ACzBA,wBAAe;;ACAf,uBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nestiq-component-library",
-  "version": "1.0.9",
+  "version": "1.0.12",
   "type": "module",
   "description": "",
   "main": "dist/index.js",
@@ -24,6 +24,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "rollup": "^4.18.0",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "^5.4.5"

package/rollup.config.mjs

@@ -1,6 +1,7 @@
 import typescript from "rollup-plugin-typescript2";
 import url from "@rollup/plugin-url";
 import postcss from "rollup-plugin-postcss";
+import copy from 'rollup-plugin-copy';
 import pkg from "./package.json" assert { type: "json" };
 
 export default {
@@ -24,8 +25,16 @@ export default {
       extensions: [".css"],
     }),
     url({
-      include: ["**/*.svg", "**/*.png", "**/*.jpg", "**/*.jpeg", "**/*.gif"],
+      include: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.gif'],
       limit: 0,
+      emitFiles: true,
+      fileName: '[name][extname]',
+      destDir: 'dist/assets/images',
     }),
+    copy({
+      targets: [
+        { src: 'src/assets/images/*', dest: 'dist/assets/images' }
+      ]
+    })
   ],
 };

package/src/assets/images/blackarrow-Right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
+</svg>

package/src/assets/images/blckarrow-Left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
+</svg>

package/src/assets/images/icon_share_1.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.046 9.9h-2.56a.937.937 0 1 0 0 1.875h2.56c.517 0 .938.42.938.937v12.26c0 .517-.42.938-.938.938H7.953a.939.939 0 0 1-.937-.938v-12.26c0-.517.42-.937.937-.937h2.56a.937.937 0 1 0 0-1.875h-2.56a2.816 2.816 0 0 0-2.812 2.812v12.26a2.816 2.816 0 0 0 2.812 2.813h14.093a2.816 2.816 0 0 0 2.813-2.813v-12.26A2.816 2.816 0 0 0 22.046 9.9zM11.504 8.007l2.59-2.59V17.76a.937.937 0 1 0 1.874 0V5.418l2.59 2.59a.934.934 0 0 0 1.326 0 .937.937 0 0 0 0-1.327l-4.19-4.19a.938.938 0 0 0-1.326 0l-4.19 4.19a.937.937 0 1 0 1.326 1.326z" fill="#000"/>
+</svg>

package/src/components/ImageListPopup/ImageListPopup.css

@@ -1,49 +1,107 @@
 .popup-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 10000;
+  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: #fff;
-    border-radius: 8px;
-    max-width: 90%;
-    max-height: 90%;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+  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: space-between;
-    align-items: center;
-    padding: 1rem;
-    border-bottom: 1px solid #ddd;
+  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 {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem;
+  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;
 }
 
-.popup-body img {
-    max-width: 100%;
-    max-height: 100%;
+.thumbnail {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 8px;
+  cursor: pointer;
+  opacity: 0.6;
 }
 
-.popup-footer {
-    padding: 1rem;
-    text-align: center;
-    border-top: 1px solid #ddd;
+.thumbnail.active {
+  border: 2px solid white;
+  opacity: 1;
 }

package/src/components/ImageListPopup/ImageListPopup.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "./ImageListPopup.css";
+import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
+import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
 
 interface Image {
   src: string;
@@ -25,34 +27,70 @@ const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
     );
   };
 
+  const handleThumbnailClick = (index: number) => {
+    setCurrentIndex(index);
+  };
+
   return (
     <div className="popup-overlay">
       <div className="popup-container">
         <div className="popup-header">
-          <span>{images[currentIndex].title}</span>
+          <span className="popup-title">{images[currentIndex].title}</span>
           <button className="btn-close" onClick={onClose}></button>
         </div>
         <div className="popup-body">
+          <div
+            className="rounded-circle border btn-prev"
+            role="button"
+            onClick={handlePrevious}
+          >
+            <img
+              src={blcIconArrowLeft}
+              className="blackArrow"
+              alt="Left Arrow"
+            ></img>
+          </div>
+          {/*<button*/}
+          {/*  className="btn-prev"*/}
+          {/*  onClick={handlePrevious}*/}
+          {/*  disabled={currentIndex === 0}*/}
+          {/*>*/}
+          {/*  &lt;*/}
+          {/*</button>*/}
           <img
             src={images[currentIndex].src}
             alt={images[currentIndex].title}
-            className="img-fluid"
+            className="main-image"
           />
+          <div
+            className="rounded-circle border btn-next"
+            role="button"
+            onClick={handleNext}
+          >
+            <img
+              src={blcIconArrowRight}
+              className="blackArrow"
+              alt="Right Arrow"
+            ></img>
+          </div>
+          {/*<button*/}
+          {/*  className="btn-next"*/}
+          {/*  onClick={handleNext}*/}
+          {/*  disabled={currentIndex === images.length - 1}*/}
+          {/*>*/}
+          {/*  &gt;*/}
+          {/*</button>*/}
         </div>
-        <div className="popup-footer">
-          {images.length > 1 && (
-            <>
-              <button
-                className="btn btn-secondary me-2"
-                onClick={handlePrevious}
-              >
-                Previous
-              </button>
-              <button className="btn btn-secondary" onClick={handleNext}>
-                Next
-              </button>
-            </>
-          )}
+        <div className="popup-thumbnails">
+          {images.map((image, index) => (
+            <img
+              key={index}
+              src={image.src}
+              alt={image.title}
+              className={`thumbnail ${index === currentIndex ? "active" : ""}`}
+              onClick={() => handleThumbnailClick(index)}
+            />
+          ))}
         </div>
       </div>
     </div>

package/src/components/Popup/Popup.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import closeIcon from "src/assets/images/icon_close 2.png";
+import closeIcon from "../../assets/images/icon_close_2.png";
 import "./Popup.css";
 
 interface PopupProps {

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx

@@ -1,12 +1,18 @@
 import React, { useState } from "react";
 // import { FormattedMessage } from "react-intl";
-import ShareIcon from "../../../../../assets/Images/icon_share 1.svg";
-import locationIcon from "../../../../../assets/Images/locationIconBlack.svg";
-import PopUp from "../SharePopup/PopUp";
+import ShareIcon from "../../assets/images/icon_share_1.svg";
+import locationIcon from "../../assets/images/locationIconBlack.svg";
+// import PopUp from "../SharePopup/PopUp";
 import "./PropertyDetailsHeader.css";
 
-export default function PropertyDetailsHeader() {
+interface PopupProps {
+  property: {
+    city: string;
+    price: string;
+  };
+}
 
+export default function PropertyDetailsHeader(props: PopupProps) {
   const [showPopUp, setShowPopUp] = useState(false);
 
   const handlePopUp = () => {
@@ -23,11 +29,10 @@ export default function PropertyDetailsHeader() {
       </div>
       <div className="header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4">
         <img src={locationIcon} alt="Location Icon" className="vector me-2" />
-        {/* {property && (
-          <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
-            {property.city}
-          </div>
-        )} */}
+
+        <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
+          {props.property.city}
+        </div>
       </div>
       <div className="d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4">
         {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
@@ -42,10 +47,11 @@ export default function PropertyDetailsHeader() {
         {/* {property && (
           <div className=" propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center  ">
             {property?.evaluation?.askingPrice} € <br />
+            {property.city}
             Kaufpreis
           </div>
         )}
-        {property && (
+        {PopupProps && (
           <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
             {property.constructedArea} m² <br />
             <FormattedMessage id="LIVING_SPACE" />
@@ -65,7 +71,7 @@ export default function PropertyDetailsHeader() {
           </div>
         )} */}
       </div>
-      {showPopUp && <PopUp onClick={handlePopUp} />}
+      {/*{showPopUp && <PopUp onClick={handlePopUp} />}*/}
     </div>
   );
 }

package/src/components/SharePopup/PopUp.css

@@ -1,359 +0,0 @@
-.popup-overlay {
-  position: fixed; /* Fixed position to cover the whole screen */
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color:  rgba(0, 0, 0, 0.5); /* Semi-transparent background */
-  display: flex; /* Flexbox to center the popup */
-  justify-content: center; /* Center horizontally */
-  align-items: center; /* Center vertically */
-  z-index: 2000; /* Ensure it's above other content */
- 
-}
-
-.shareSection {
-  height: 340px;
-  padding: 40px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-  
-}
-.popUpHeader {
-  height: 48px;
-  font-size: 32px;
-  font-weight: 600;
-  color: #1b1b1b;
-}
-
-.closeIcon {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}
-
-.socialMediaIconsSection {
-  gap: 60px !important;
-}
-
-.socialMediaIcons {
-  width: 28px !important;
-  height: 28px !important;
-  cursor: pointer;
-}
-
-.socialMediaIconText {
-  height: 36px;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 3;
-  color: #344041;
-  cursor: pointer;
-}
-
-.popup_search-input {
-  height: 60px;
-  padding-inline-end: 190px;
-  font-size: 20px;
-  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-.popup_search-input::placeholder {
-  font-size: 20px;
-  color: rgba(140, 140, 140, 0.5);
-}
-
-.popup_search-input:focus {
-  outline: none;
-}
-
-.popupcustom-button {
-  height: 35px;
-  color: #000;
-  cursor: pointer;
-  border-color: #ffb525;
-  right: 0;
-  z-index: 1;
-  background-color: #ffb525;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-}
-.button-text {
-  width: 115px;
-  height: 19px;
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-}
-.button_success-right {
-  width: 184px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  border-color: #000;
-  background-color: transparent;
-}
-.button_success-left {
-  width: 200px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: #ffb525;
-}
-.shareSection-Success {
-  height: 510px;
-  padding: 40px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-}
-.shareSection-Error {
-  height: 400px;
-  padding:10px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-}
-.MessageShareSection {
-  height: 513px;
-  padding: 14px 14px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-}
-
-.popup-tags {
-  font-size: large;
-  font-weight: bold;
-}
-.button_icon-left {
-  width: 184px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: #ffb525;
-}
-.button-text {
-  width: 85px;
-  height: 19px;
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-}
-.button_icon-right {
-  width: 184px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  border-color: #000;
-  background-color: transparent;
-}
-.circle {
-  height: 55px;
-  width: 55px;
-  background-color: transparent;
-  border-radius: 50%;
-  border-style: solid;
-  border-color: #000;
-  border-width: 2px;
-}
-.Line-9, .Line-10 {
-  height: 1px;
-  flex-grow: 1;
-  background-color: rgba(140, 140, 140, 0.5);
-  max-width:23rem;
-  align-self: center;
-  align-content: center;
- 
-}
-
-.middle-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.middle-text {
-  margin: 25px 25px;
-}
-.google-button{
-  width: 260px;
-  height: 45px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 4px;
-  background-color: #000000;
-  background: linear-gradient(to top, #000 , #666 );
-  
-  
-}
-.Account-popup{
-   
-    height: 713px;
-    padding: 10px;
-    border-radius: 16px;
-    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-    border: solid 1px #d7d9e3;
-    background-color: #fff;
-    max-width: 1000px;
-  
-}
-.lightertxt{
-  color: #797979;
-}
-
-.filter {
-  height: 343px;
-  align-self: stretch;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 32px;
-  border-radius: 32px;
-  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
-  background-color: #f2f2f2;
-}
-.loginFilter {
-  height: 280px;
-  align-self: stretch;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 32px;
-  border-radius: 32px;
-  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
-  background-color: #f2f2f2;
-}
-.radioLabel {
-  width: 176px;
-  height: 19px;
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: left;
-  color: #1b1b1b;
-}
-.goButton-text {
-  width: 78px;
-  height: 19px;
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-  color: #1b1b1b;
-}
-.placeholders {
-  width: 232px;
-  height: 45px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 4px;
-  background-image: linear-gradient(to top, #000 100%, #666 0%);
-}
-.TagW.active {
-  height: 40px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  padding: 0 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-image: linear-gradient(to top, #000 , #666);
-  color: white;
-}
-.Tag {
-  height: 40px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  padding: 0 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-background-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255,0,0,1));}
-.TagW {
-  height: 40px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  padding: 0 24px;
-  border-radius: 16px;
-  border: solid 1px #000;
-  background-color: #fff;
-    color: #000;
-
-}
-/* */

package/src/components/SharePopup/PopUp.tsx

@@ -1,99 +0,0 @@
-import React, { useRef } from "react";
-import { toast } from "react-toastify";
-import email from "../../../assets/Images/envelope-fill.svg";
-import facebook from "../../../assets/Images/facebook.svg";
-import x from "../../../assets/Images/icon_close 2.png";
-import linkedln from "../../../assets/Images/linkedin.svg";
-import Xtwitter from "../../../assets/Images/twitter-x.svg";
-import whatsapp from "../../../assets/Images/whatsapp.svg";
-import "./PopUp.css";
-
-export default function PopUp({ onClick }) {
-  const handleClose = () => {
-    onClick();
-  };
-
-  const urlInputRef = useRef(null);
-
-  const copyToClipboard = () => {
-    urlInputRef.current.select();
-    document.execCommand("copy");
-    toast.success("URL copied to clipboard!");
-  };
-
-  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={x}
-            alt="close"
-            className="closeIcon me-2"
-            onClick={handleClose}
-          />
-        </div>
-        <div className="popUpHeader col-lg-12 d-flex justify-content-center mb-2">
-          Jetzt teilen und weitersagen!
-        </div>
-        <div className="h-25 col-lg-12 socialMediaIconsSection d-flex flex-row align-items-center justify-content-center mx-auto">
-        
-        <a href="https://twitter.com/intent/tweet?url=https://www.nestiq.de&text=Nestiq" className="text-decoration-none" target="blank">
-          <div className=" flex-column d-flex align-items-center">
-            <img src={Xtwitter} alt="twitter" className="socialMediaIcons" />
-            <span className="socialMediaIconText" >Xtwitter</span>
-          </div>
-          </a>
-
-          <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.nestiq.de" className="text-decoration-none" target="blank" >
-          <div className=" flex-column d-flex align-items-center">
-            <img src={facebook} alt="facebook" className="socialMediaIcons " />
-            <span className="socialMediaIconText">Facebook</span>
-          </div>
-          </a>
-
-          <a href="https://api.whatsapp.com/send?text=https://www.nestiq.de" target="blank" className="text-decoration-none">
-          <div className=" flex-column d-flex  align-items-center">
-            <img src={whatsapp} alt="whatsapp" className=" socialMediaIcons" />
-            <span className="socialMediaIconText">WhatsApp</span>
-          </div>
-          </a>
-          
-          <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.nestiq.de" target="blank" className="text-decoration-none">
-          <div className=" flex-column d-flex  align-items-center">
-            <img src={linkedln} alt="linkedin" className=" socialMediaIcons" />
-            <span className="socialMediaIconText">LinkedIn</span>
-          </div>
-          </a>
-
-          <a href="https://www.nestiq.de" target="blank" className="text-decoration-none">
-          <div className=" flex-column d-flex  align-items-center">
-            <img src={email} alt="email" className=" socialMediaIcons" />
-            <span className="socialMediaIconText">E-mail</span>
-          </div>
-          </a>
-
-        </div>
-        <div className="col-10 mx-auto">
-          <div className=" row align-items-center position-relative">
-            <input
-              ref={urlInputRef}
-              type="text"
-              className="popup_search-input rounded-4 border border-0 "
-              placeholder="Enter link here"
-              value={window.location.href}
-              readOnly
-            />
-            <button
-              onClick={copyToClipboard}
-              className="popupcustom-button border border-0 position-absolute me-2 col-lg-3 col-md-3 col-sm-3 rounded-4 fs-6"
-              type="button"
-              id="button"
-            >
-              <strong>Kopieren</strong>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}