nestiq-component-library 1.0.10 → 1.0.12

package/dist/components/Button/Button.js

@@ -0,0 +1,6 @@
+import React from 'react';
+var Button = function (_a) {
+    var label = _a.label;
+    return React.createElement("button", null, label);
+};
+export default Button;

package/dist/components/ImageListPopup/ImageListPopup.js

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./ImageListPopup.css";
+var ImageListPopup = function (_a) {
+    var images = _a.images, onClose = _a.onClose;
+    var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
+    var handlePrevious = function () {
+        setCurrentIndex(function (prevIndex) { return (prevIndex > 0 ? prevIndex - 1 : prevIndex); });
+    };
+    var handleNext = function () {
+        setCurrentIndex(function (prevIndex) {
+            return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
+        });
+    };
+    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("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")))))));
+};
+export default ImageListPopup;

package/dist/components/Popup/Popup.js

@@ -0,0 +1,12 @@
+import React from "react";
+import closeIcon from "src/assets/images/icon_close 2.png";
+import "./Popup.css";
+var Popup = function (_a) {
+    var onCloseClick = _a.onCloseClick, children = _a.children;
+    return (React.createElement("div", { className: "popup-overlay" },
+        React.createElement("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" },
+            React.createElement("div", { className: "end-0 top-0 position-absolute " },
+                React.createElement("img", { src: closeIcon, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
+            children)));
+};
+export default Popup;

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

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

package/dist/index.es.js

@@ -47,7 +47,7 @@ var Popup = function (_a) {
             children)));
 };
 
-var css_248z$1 = ".popup-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 10000;\n}\n\n.popup-container {\n  background-color: transparent;\n  border-radius: 8px;\n  max-width: 90%;\n  max-height: 90%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n}\n\n.popup-header {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  padding: 1rem;\n  position: absolute;\n  top: 0;\n}\n\n.popup-title {\n  color: white;\n  font-size: 24px;\n  font-weight: bold;\n}\n\n.btn-close {\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n  background: none;\n  border: none;\n  color: white;\n  font-size: 24px;\n  cursor: pointer;\n}\n\n.popup-body {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 1rem;\n  position: relative;\n  flex: 1;\n}\n\n.main-image {\n  max-width: 100%;\n  max-height: 80vh;\n  border-radius: 8px;\n}\n\n.btn-prev,\n.btn-next {\n  background: none;\n  border: none;\n  color: white;\n  font-size: 48px;\n  cursor: pointer;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.btn-prev {\n  left: 10px;\n}\n\n.btn-next {\n  right: 10px;\n}\n\n.popup-thumbnails {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  padding: 1rem;\n}\n\n.thumbnail {\n  width: 60px;\n  height: 60px;\n  object-fit: cover;\n  border-radius: 8px;\n  cursor: pointer;\n  opacity: 0.6;\n}\n\n.thumbnail.active {\n  border: 2px solid white;\n  opacity: 1;\n}\n";
+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";
@@ -89,7 +89,7 @@ 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() {
+function PropertyDetailsHeader(props) {
     var _a = useState(false), showPopUp = _a[0], setShowPopUp = _a[1];
     var handlePopUp = function () {
         setShowPopUp(!showPopUp);
@@ -98,7 +98,8 @@ function PropertyDetailsHeader() {
         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("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" })));

package/dist/index.es.js.map

@@ -1 +1 @@
-{"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]}
+{"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

@@ -49,7 +49,7 @@ var Popup = function (_a) {
             children)));
 };
 
-var css_248z$1 = ".popup-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 10000;\n}\n\n.popup-container {\n  background-color: transparent;\n  border-radius: 8px;\n  max-width: 90%;\n  max-height: 90%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n}\n\n.popup-header {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  padding: 1rem;\n  position: absolute;\n  top: 0;\n}\n\n.popup-title {\n  color: white;\n  font-size: 24px;\n  font-weight: bold;\n}\n\n.btn-close {\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n  background: none;\n  border: none;\n  color: white;\n  font-size: 24px;\n  cursor: pointer;\n}\n\n.popup-body {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 1rem;\n  position: relative;\n  flex: 1;\n}\n\n.main-image {\n  max-width: 100%;\n  max-height: 80vh;\n  border-radius: 8px;\n}\n\n.btn-prev,\n.btn-next {\n  background: none;\n  border: none;\n  color: white;\n  font-size: 48px;\n  cursor: pointer;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.btn-prev {\n  left: 10px;\n}\n\n.btn-next {\n  right: 10px;\n}\n\n.popup-thumbnails {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  padding: 1rem;\n}\n\n.thumbnail {\n  width: 60px;\n  height: 60px;\n  object-fit: cover;\n  border-radius: 8px;\n  cursor: pointer;\n  opacity: 0.6;\n}\n\n.thumbnail.active {\n  border: 2px solid white;\n  opacity: 1;\n}\n";
+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";
@@ -91,7 +91,7 @@ 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() {
+function PropertyDetailsHeader(props) {
     var _a = React.useState(false), showPopUp = _a[0], setShowPopUp = _a[1];
     var handlePopUp = function () {
         setShowPopUp(!showPopUp);
@@ -100,7 +100,8 @@ function PropertyDetailsHeader() {
         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("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" })));

package/dist/index.js.map

@@ -1 +1 @@
-{"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]}
+{"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.10",
+  "version": "1.0.12",
   "type": "module",
   "description": "",
   "main": "dist/index.js",

package/rollup.config.mjs

@@ -1,40 +1,40 @@
-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 {
-  input: "src/index.tsx",
-  output: [
-    {
-      file: pkg.main,
-      format: "cjs",
-      sourcemap: true,
-    },
-    {
-      file: pkg.module,
-      format: "es",
-      sourcemap: true,
-    },
-  ],
-  external: ["react", "react-dom"],
-  plugins: [
-    typescript(),
-    postcss({
-      extensions: [".css"],
-    }),
-    url({
-      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' }
-      ]
-    })
-  ],
-};
+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 {
+  input: "src/index.tsx",
+  output: [
+    {
+      file: pkg.main,
+      format: "cjs",
+      sourcemap: true,
+    },
+    {
+      file: pkg.module,
+      format: "es",
+      sourcemap: true,
+    },
+  ],
+  external: ["react", "react-dom"],
+  plugins: [
+    typescript(),
+    postcss({
+      extensions: [".css"],
+    }),
+    url({
+      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/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,100 +1,100 @@
-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;
-  title: string;
-}
-
-interface ImageListPopupProps {
-  images: Image[];
-  onClose: () => void;
-}
-
-const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  const handlePrevious = () => {
-    setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
-  };
-
-  const handleNext = () => {
-    setCurrentIndex((prevIndex) =>
-      prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
-    );
-  };
-
-  const handleThumbnailClick = (index: number) => {
-    setCurrentIndex(index);
-  };
-
-  return (
-    <div className="popup-overlay">
-      <div className="popup-container">
-        <div className="popup-header">
-          <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="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-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>
-  );
-};
-
-export default ImageListPopup;
+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;
+  title: string;
+}
+
+interface ImageListPopupProps {
+  images: Image[];
+  onClose: () => void;
+}
+
+const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handlePrevious = () => {
+    setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
+    );
+  };
+
+  const handleThumbnailClick = (index: number) => {
+    setCurrentIndex(index);
+  };
+
+  return (
+    <div className="popup-overlay">
+      <div className="popup-container">
+        <div className="popup-header">
+          <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="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-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>
+  );
+};
+
+export default ImageListPopup;

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;

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx

@@ -1,70 +1,77 @@
-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 "./PropertyDetailsHeader.css";
-
-export default function PropertyDetailsHeader() {
-  const [showPopUp, setShowPopUp] = useState(false);
-
-  const handlePopUp = () => {
-    setShowPopUp(!showPopUp);
-  };
-
-  return (
-    <div className="Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 ">
-      <div className="header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 ">
-        <strong>
-          Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in
-          top Lage
-        </strong>
-      </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>
-      <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" /> */}
-        <img
-          src={ShareIcon}
-          alt="Location Icon"
-          className="v_share me-3"
-          onClick={handlePopUp}
-        />
-      </div>
-      <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">
-        {/* {property && (
-          <div className=" propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center  ">
-            {property?.evaluation?.askingPrice} € <br />
-            Kaufpreis
-          </div>
-        )}
-        {property && (
-          <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" />
-          </div>
-        )}
-        {property && (
-          <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
-            {property.rooms} <br />
-            <FormattedMessage id="ROOMS" />
-          </div>
-        )}
-        {property && (
-          <div className="propText  col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
-            {property.propertyArea} m²
-            <br />
-            <FormattedMessage id="Grundstück" />
-          </div>
-        )} */}
-      </div>
-      {/*{showPopUp && <PopUp onClick={handlePopUp} />}*/}
-    </div>
-  );
-}
+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 "./PropertyDetailsHeader.css";
+
+interface PopupProps {
+  property: {
+    city: string;
+    price: string;
+  };
+}
+
+export default function PropertyDetailsHeader(props: PopupProps) {
+  const [showPopUp, setShowPopUp] = useState(false);
+
+  const handlePopUp = () => {
+    setShowPopUp(!showPopUp);
+  };
+
+  return (
+    <div className="Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 ">
+      <div className="header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 ">
+        <strong>
+          Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in
+          top Lage
+        </strong>
+      </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" />
+
+        <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" /> */}
+        <img
+          src={ShareIcon}
+          alt="Location Icon"
+          className="v_share me-3"
+          onClick={handlePopUp}
+        />
+      </div>
+      <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">
+        {/* {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>
+        )}
+        {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" />
+          </div>
+        )}
+        {property && (
+          <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
+            {property.rooms} <br />
+            <FormattedMessage id="ROOMS" />
+          </div>
+        )}
+        {property && (
+          <div className="propText  col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
+            {property.propertyArea} m²
+            <br />
+            <FormattedMessage id="Grundstück" />
+          </div>
+        )} */}
+      </div>
+      {/*{showPopUp && <PopUp onClick={handlePopUp} />}*/}
+    </div>
+  );
+}