nestiq-component-library 1.0.19 → 1.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/assets/images/LayersIcon.svg +5 -0
  2. package/dist/assets/images/default-property.jpg +0 -0
  3. package/dist/assets/images/heartIcon.svg +3 -0
  4. package/dist/assets/images/locationIcon.svg +4 -0
  5. package/dist/assets/images/no-image-icon.png +0 -0
  6. package/dist/components/PropertyCard/PropertyCard.d.ts +1 -4
  7. package/dist/index.es.js +16 -8
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/index.js +16 -8
  10. package/dist/index.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/assets/images/LayersIcon.svg +5 -0
  13. package/src/assets/images/default-property.jpg +0 -0
  14. package/src/assets/images/heartIcon.svg +3 -0
  15. package/src/assets/images/locationIcon.svg +4 -0
  16. package/src/assets/images/no-image-icon.png +0 -0
  17. package/src/components/PropertyCard/PropertyCard.tsx +10 -23
package/dist/assets/images/LayersIcon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="m16.855 5.147-8-4.572a.571.571 0 0 0-.567 0l-8 4.572a.571.571 0 0 0 .014 1l8 4.285a.571.571 0 0 0 .54 0l8-4.285a.571.571 0 0 0 .013-1zM8.572 9.28l-6.82-3.653 6.82-3.897 6.82 3.897-6.82 3.653z" fill="#031012"/>
3
+ <path d="M8.846 13.43 16.57 9.18V7.877l-8 4.4-8-4.4V9.18l7.725 4.249a.572.572 0 0 0 .55 0z" fill="#031012"/>
4
+ <path d="m.57 12.309 7.731 4.123a.572.572 0 0 0 .538 0l7.731-4.123v-1.295l-8 4.266-8-4.266v1.295z" fill="#031012"/>
5
+ </svg>
package/dist/assets/images/heartIcon.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="30" height="27" viewBox="0 0 30 27" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M27.24 2.467a7.97 7.97 0 0 0-11.275.004l-.966.978-.958-.976-.006-.006a7.97 7.97 0 0 0-11.27 0l-.43.43a7.97 7.97 0 0 0 0 11.27l11.354 11.356 1.282 1.343.03-.03.034.033 1.201-1.268L27.67 14.168a7.979 7.979 0 0 0 0-11.27l-.43-.431zm-.98 10.292L15.003 24.018l-11.26-11.26a5.977 5.977 0 0 1 0-8.452l.431-.43a5.977 5.977 0 0 1 8.45-.003l2.372 2.415 2.383-2.412a5.977 5.977 0 0 1 8.453 0l.43.43a5.984 5.984 0 0 1 0 8.453z" fill="#fff"/>
3
+ </svg>
package/dist/assets/images/locationIcon.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6 4.725a2.208 2.208 0 1 0 .001 4.416 2.208 2.208 0 0 0 0-4.416zm0 3.312a1.104 1.104 0 1 1 .001-2.208 1.104 1.104 0 0 1 0 2.208z" fill="#fff"/>
3
+ <path d="M10.243 2.687a6 6 0 0 0-9.27 7.518l4.17 6.403a1.022 1.022 0 0 0 1.713 0l4.171-6.404a6 6 0 0 0-.784-7.517zm-.14 6.915L6 15.9 1.897 9.602a4.919 4.919 0 0 1 .64-6.135 4.896 4.896 0 0 1 6.925 0 4.919 4.919 0 0 1 .64 6.135z" fill="#fff"/>
4
+ </svg>
package/dist/components/PropertyCard/PropertyCard.d.ts CHANGED
@@ -3,9 +3,6 @@ import "../PropertyCard/PropertyCard.css";
3
3
  interface PopupProps {
4
4
  property: {
5
5
  city: string;
6
- pictures: {
7
- contentUrl: string;
8
- }[];
9
6
  historicalProtection: boolean;
10
7
  basement: boolean;
11
8
  balcony: boolean;
@@ -14,8 +11,8 @@ interface PopupProps {
14
11
  bathrooms: string;
15
12
  usableArea: string;
16
13
  id: string;
17
- contentUrl: string;
18
14
  rooms: string;
15
+ askingPrice: string;
19
16
  };
20
17
  onClick: any;
21
18
  pictureUrl: any[];
package/dist/index.es.js CHANGED
@@ -48,7 +48,7 @@ var Popup = function (_a) {
48
48
 
49
49
  var ShareIcon = "icon_share_1.svg";
50
50
 
51
- var locationIcon = "locationIconBlack.svg";
51
+ var locationIcon$1 = "locationIconBlack.svg";
52
52
 
53
53
  var css_248z$3 = ".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";
54
54
  styleInject(css_248z$3);
@@ -62,7 +62,7 @@ function PropertyDetailsHeader(props) {
62
62
  React.createElement("div", { className: "header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 " },
63
63
  React.createElement("strong", null, "Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in top Lage")),
64
64
  React.createElement("div", { className: "header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4" },
65
- React.createElement("img", { src: locationIcon, className: "vector me-2" }),
65
+ React.createElement("img", { src: locationIcon$1, className: "vector me-2" }),
66
66
  React.createElement("div", { className: "propText text-truncate col-lg-6 col-md-6 d-flex align-items-center" }, props.property.city)),
67
67
  React.createElement("div", { className: "d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4" },
68
68
  React.createElement("img", { src: ShareIcon, className: "v_share me-3", onClick: handlePopUp })),
@@ -274,20 +274,27 @@ function PropertyImageList(prop) {
274
274
  isImagePopupOpen && (React.createElement(ImageListPopup, { currentImageIndex: currentImageIndex, handleArrowClickInMainImage: handleArrowClickInMainImage, imageListRef: imageListRef, pictureUrls: prop.pictureUrls, property: prop.property }))));
275
275
  }
276
276
 
277
+ var layerIcon = "LayersIcon.svg";
278
+
279
+ var locationIcon = "locationIcon.svg";
280
+
277
281
  var css_248z = ".padding-global {\r\n height: 737px !important;\r\n padding: 0 40px;\r\n}\r\n.header {\r\n font-size: 48px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n\r\n.firstLabel {\r\n width: 100px;\r\n height: 25px;\r\n gap: 6px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #031012 !important;\r\n background-color: #ffb525;\r\n}\r\n\r\n.secondLabel {\r\n width: 85px;\r\n height: 25px;\r\n padding: 0 7px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #000;\r\n background-color: #fff;\r\n}\r\n\r\n.thirdLabel {\r\n width: 90px;\r\n height: 25px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #000;\r\n background-color: #fff;\r\n}\r\n\r\n.fourthLabel {\r\n width: 100px;\r\n height: 25px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #000;\r\n background-color: #fff;\r\n}\r\n\r\n.layersVector {\r\n width: 15.1px;\r\n height: 16px;\r\n}\r\n\r\n.layersText {\r\n font-size: 14px;\r\n color: #1b1b1b;\r\n}\r\n\r\n.style-img {\r\n object-fit: cover;\r\n border-radius: 30px !important;\r\n}\r\n\r\n.Vector {\r\n width: 12px;\r\n height: 16.1px;\r\n flex-grow: 0;\r\n margin: 0.4px 6px 0.4px 0;\r\n}\r\n\r\n.customButton {\r\n width: 262px;\r\n height: 43px;\r\n color: #000;\r\n cursor: pointer;\r\n border-color: #ffb525;\r\n background-color: #ffb525;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button_text {\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: #1b1b1b;\r\n}\r\n\r\n.heartVector {\r\n width: 23px;\r\n height: 26.7px;\r\n cursor: pointer;\r\n}\r\n\r\n.heartVector.liked {\r\n fill: rgb(255, 255, 255) !important;\r\n}\r\n.locationText {\r\n font-size: 14px;\r\n color: white;\r\n text-align: center;\r\n}\r\n\r\n.arrowVector {\r\n width: 23px;\r\n height: 23px;\r\n flex-grow: 0;\r\n object-fit: contain;\r\n}\r\n\r\n.Price {\r\n font-size: 26px;\r\n font-weight: 500;\r\n font-stretch: normal;\r\n font-style: normal;\r\n line-height: normal;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #fff;\r\n}\r\n\r\n.detail {\r\n font-size: 12px;\r\n text-align: center;\r\n color: #fff;\r\n}\r\n\r\n.class {\r\n background-color: #1b1b1b;\r\n}\r\n\r\n.header {\r\n height: 64px;\r\n justify-content: center;\r\n}\r\n\r\n.cardStyle {\r\n width: 405px;\r\n max-width: 2405px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 350px;\r\n border-radius: 30px !important;\r\n}\r\n\r\n.rightConer {\r\n width: 200px;\r\n}\r\n@media all and (min-width: 2560px) {\r\n .header {\r\n font-size: 38px;\r\n\r\n display: flex;\r\n }\r\n .cardStyle {\r\n gap: 0px;\r\n width: 350px;\r\n height: 300px;\r\n /* margin-left: 250px; */\r\n }\r\n}\r\n@media (max-width: 1399px) {\r\n .header {\r\n font-size: 38px;\r\n align-self: center;\r\n margin-left: 150px;\r\n }\r\n .cardStyle {\r\n gap: 0px;\r\n width: 350px;\r\n height: 300px;\r\n }\r\n}\r\n\r\n@media (max-width: 1199px) {\r\n .header {\r\n font-size: 38px;\r\n }\r\n .cardStyle {\r\n width: 300px;\r\n height: 250px;\r\n }\r\n}\r\n\r\n@media (max-width: 575px) {\r\n .detail {\r\n font-size: 11px;\r\n padding: 2px;\r\n }\r\n .Price {\r\n font-size: 19px;\r\n }\r\n .header {\r\n font-size: 28px;\r\n }\r\n .locationText {\r\n font-size: 12px;\r\n }\r\n .customButton {\r\n width: 200px !important;\r\n }\r\n .button_text {\r\n font-size: 13px;\r\n }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n .labelTopClass {\r\n width: 105px !important;\r\n }\r\n .layersText {\r\n font-size: 9px;\r\n }\r\n .firstLabel {\r\n gap: 2px;\r\n }\r\n .layersVector {\r\n width: 9px;\r\n height: 10px;\r\n gap: 0px;\r\n }\r\n .cardStyle {\r\n width: 320px !important;\r\n height: 220px !important;\r\n }\r\n .header {\r\n font-size: 24px;\r\n }\r\n .detail {\r\n font-size: 10px;\r\n padding: 2px;\r\n }\r\n .Price {\r\n font-size: 18px;\r\n }\r\n .locationText {\r\n font-size: 10px;\r\n }\r\n .Vector {\r\n width: 8px;\r\n height: 16px;\r\n margin: 0px 2px 0.4px;\r\n }\r\n}\r\n\r\n@media (max-width: 280px) {\r\n .cardStyle {\r\n width: 260px !important;\r\n height: 160px !important;\r\n }\r\n .detail {\r\n margin-bottom: 5px;\r\n font-size: 0.6ch;\r\n }\r\n .Price {\r\n font-size: 9px;\r\n }\r\n .locationText {\r\n font-size: 6px;\r\n }\r\n .Vector {\r\n width: 7px;\r\n height: 10px;\r\n margin: 0px 2px 4px;\r\n }\r\n .heartVector {\r\n width: 15px;\r\n height: 20px;\r\n }\r\n}\r\n";
278
282
  styleInject(css_248z);
279
283
 
284
+ var noImageIcon = "default-property.jpg";
285
+
280
286
  function PropertyCard(props) {
281
- var _a = useState(false); _a[0]; _a[1];
287
+ var _a, _b;
288
+ var _c = useState(false); _c[0]; _c[1];
282
289
  return (React.createElement("div", { key: props.property.id, className: "card-body me-4 mb-4 position-relative cardStyle", style: {
283
- backgroundImage: "url(".concat(props.pictureUrl, ")"),
290
+ backgroundImage: "url(".concat(props.pictureUrl, ") || ").concat(noImageIcon),
284
291
  backgroundSize: "cover",
285
292
  backgroundPosition: "center",
286
293
  }, onClick: props.onClick, role: "button" },
287
294
  React.createElement("div", { className: "labelTopClass position-absolute top-0 start-0 col-sm-5 col-lg-8" },
288
295
  React.createElement("div", { className: "d-flex align-items-center ms-2 mb-1 mt-2 gap-2" },
289
296
  React.createElement("label", { className: "firstLabel d-flex flex-row justify-content-center align-items-center" },
290
- React.createElement("img", { src: blcIconArrowRight, alt: "Location Icon", className: "layersVector" }),
297
+ React.createElement("img", { src: layerIcon, alt: "Location Icon", className: "layersVector" }),
291
298
  React.createElement("span", { className: "layersText" }, "Grundriss")),
292
299
  props.property.historicalProtection && (React.createElement("label", { className: "thirdLabel d-flex flex-row justify-content-center align-items-center" },
293
300
  React.createElement("span", { className: "layersText" }, "Denkmalschutz"))),
@@ -302,9 +309,10 @@ function PropertyCard(props) {
302
309
  React.createElement("span", { className: "layersText" }, "Gäste-WC"))))),
303
310
  React.createElement("div", { className: "d-flex align-items-center position-absolute top-0 end-0 p-3" }),
304
311
  React.createElement("div", { className: "d-flex align-items-center mb-3 position-absolute bottom-0 start-0 p-2" },
305
- React.createElement("span", { className: "Price col-lg-12 col-md-12 col-sm-12 text-truncate" })),
312
+ React.createElement("span", { className: "Price col-lg-12 col-md-12 col-sm-12 text-truncate" }, (_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.askingPrice) !== null && _b !== void 0 ? _b : 0,
313
+ " \u20AC")),
306
314
  React.createElement("div", { className: "d-flex align-items-center position-absolute bottom-0 start-0 p-2" },
307
- React.createElement("img", { src: blcIconArrowRight, alt: "Location Icon", className: "Vector" }),
315
+ React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "Vector" }),
308
316
  React.createElement("span", { className: "locationText " }, props.property.city || "N/A")),
309
317
  React.createElement("div", { className: "d-flex col-lg-6 col-md-6 col-sm-5 me-lg-0 me-md-0 me-sm-3 justify-content-center mb-2 position-absolute bottom-0 end-0" },
310
318
  React.createElement("span", { className: "detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end " },
@@ -316,7 +324,7 @@ function PropertyCard(props) {
316
324
  React.createElement("br", null),
317
325
  +props.property.bathrooms,
318
326
  React.createElement("br", null),
319
- React.createElement("span", null, "Bad")),
327
+ React.createElement("span", null, "B\u00E4d")),
320
328
  React.createElement("span", { className: "detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3" },
321
329
  props.property.usableArea,
322
330
  " m\u00B2",
package/dist/index.es.js.map CHANGED
@@ -1 +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/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/Icon_rightArrow.svg","../src/assets/Images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/Images/chevron-left.svg","../src/assets/Images/icon_gallery.svg","../src/assets/Images/icon_map.svg","../src/assets/Images/layer_icon.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 \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"Icon_rightArrow.svg\"","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"chevron-left.svg\"","export default \"icon_gallery.svg\"","export default \"icon_map.svg\"","export default \"layer_icon.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,gBAAe;;ACAf,mBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[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/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/Icon_rightArrow.svg","../src/assets/Images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/Images/chevron-left.svg","../src/assets/Images/icon_gallery.svg","../src/assets/Images/icon_map.svg","../src/assets/Images/layer_icon.svg","../src/assets/Images/LayersIcon.svg","../src/assets/images/locationIcon.svg","../src/assets/Images/default-property.jpg"],"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 \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"Icon_rightArrow.svg\"","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"chevron-left.svg\"","export default \"icon_gallery.svg\"","export default \"icon_map.svg\"","export default \"layer_icon.svg\"","export default \"LayersIcon.svg\"","export default \"locationIcon.svg\"","export default \"default-property.jpg\""],"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,gBAAe;;ACAf,qBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;ACAf,kBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
package/dist/index.js CHANGED
@@ -50,7 +50,7 @@ var Popup = function (_a) {
50
50
 
51
51
  var ShareIcon = "icon_share_1.svg";
52
52
 
53
- var locationIcon = "locationIconBlack.svg";
53
+ var locationIcon$1 = "locationIconBlack.svg";
54
54
 
55
55
  var css_248z$3 = ".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";
56
56
  styleInject(css_248z$3);
@@ -64,7 +64,7 @@ function PropertyDetailsHeader(props) {
64
64
  React.createElement("div", { className: "header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 " },
65
65
  React.createElement("strong", null, "Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in top Lage")),
66
66
  React.createElement("div", { className: "header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4" },
67
- React.createElement("img", { src: locationIcon, className: "vector me-2" }),
67
+ React.createElement("img", { src: locationIcon$1, className: "vector me-2" }),
68
68
  React.createElement("div", { className: "propText text-truncate col-lg-6 col-md-6 d-flex align-items-center" }, props.property.city)),
69
69
  React.createElement("div", { className: "d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4" },
70
70
  React.createElement("img", { src: ShareIcon, className: "v_share me-3", onClick: handlePopUp })),
@@ -276,20 +276,27 @@ function PropertyImageList(prop) {
276
276
  isImagePopupOpen && (React.createElement(ImageListPopup, { currentImageIndex: currentImageIndex, handleArrowClickInMainImage: handleArrowClickInMainImage, imageListRef: imageListRef, pictureUrls: prop.pictureUrls, property: prop.property }))));
277
277
  }
278
278
 
279
+ var layerIcon = "LayersIcon.svg";
280
+
281
+ var locationIcon = "locationIcon.svg";
282
+
279
283
  var css_248z = ".padding-global {\r\n height: 737px !important;\r\n padding: 0 40px;\r\n}\r\n.header {\r\n font-size: 48px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n\r\n.firstLabel {\r\n width: 100px;\r\n height: 25px;\r\n gap: 6px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #031012 !important;\r\n background-color: #ffb525;\r\n}\r\n\r\n.secondLabel {\r\n width: 85px;\r\n height: 25px;\r\n padding: 0 7px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #000;\r\n background-color: #fff;\r\n}\r\n\r\n.thirdLabel {\r\n width: 90px;\r\n height: 25px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #000;\r\n background-color: #fff;\r\n}\r\n\r\n.fourthLabel {\r\n width: 100px;\r\n height: 25px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #000;\r\n background-color: #fff;\r\n}\r\n\r\n.layersVector {\r\n width: 15.1px;\r\n height: 16px;\r\n}\r\n\r\n.layersText {\r\n font-size: 14px;\r\n color: #1b1b1b;\r\n}\r\n\r\n.style-img {\r\n object-fit: cover;\r\n border-radius: 30px !important;\r\n}\r\n\r\n.Vector {\r\n width: 12px;\r\n height: 16.1px;\r\n flex-grow: 0;\r\n margin: 0.4px 6px 0.4px 0;\r\n}\r\n\r\n.customButton {\r\n width: 262px;\r\n height: 43px;\r\n color: #000;\r\n cursor: pointer;\r\n border-color: #ffb525;\r\n background-color: #ffb525;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button_text {\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: #1b1b1b;\r\n}\r\n\r\n.heartVector {\r\n width: 23px;\r\n height: 26.7px;\r\n cursor: pointer;\r\n}\r\n\r\n.heartVector.liked {\r\n fill: rgb(255, 255, 255) !important;\r\n}\r\n.locationText {\r\n font-size: 14px;\r\n color: white;\r\n text-align: center;\r\n}\r\n\r\n.arrowVector {\r\n width: 23px;\r\n height: 23px;\r\n flex-grow: 0;\r\n object-fit: contain;\r\n}\r\n\r\n.Price {\r\n font-size: 26px;\r\n font-weight: 500;\r\n font-stretch: normal;\r\n font-style: normal;\r\n line-height: normal;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #fff;\r\n}\r\n\r\n.detail {\r\n font-size: 12px;\r\n text-align: center;\r\n color: #fff;\r\n}\r\n\r\n.class {\r\n background-color: #1b1b1b;\r\n}\r\n\r\n.header {\r\n height: 64px;\r\n justify-content: center;\r\n}\r\n\r\n.cardStyle {\r\n width: 405px;\r\n max-width: 2405px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 350px;\r\n border-radius: 30px !important;\r\n}\r\n\r\n.rightConer {\r\n width: 200px;\r\n}\r\n@media all and (min-width: 2560px) {\r\n .header {\r\n font-size: 38px;\r\n\r\n display: flex;\r\n }\r\n .cardStyle {\r\n gap: 0px;\r\n width: 350px;\r\n height: 300px;\r\n /* margin-left: 250px; */\r\n }\r\n}\r\n@media (max-width: 1399px) {\r\n .header {\r\n font-size: 38px;\r\n align-self: center;\r\n margin-left: 150px;\r\n }\r\n .cardStyle {\r\n gap: 0px;\r\n width: 350px;\r\n height: 300px;\r\n }\r\n}\r\n\r\n@media (max-width: 1199px) {\r\n .header {\r\n font-size: 38px;\r\n }\r\n .cardStyle {\r\n width: 300px;\r\n height: 250px;\r\n }\r\n}\r\n\r\n@media (max-width: 575px) {\r\n .detail {\r\n font-size: 11px;\r\n padding: 2px;\r\n }\r\n .Price {\r\n font-size: 19px;\r\n }\r\n .header {\r\n font-size: 28px;\r\n }\r\n .locationText {\r\n font-size: 12px;\r\n }\r\n .customButton {\r\n width: 200px !important;\r\n }\r\n .button_text {\r\n font-size: 13px;\r\n }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n .labelTopClass {\r\n width: 105px !important;\r\n }\r\n .layersText {\r\n font-size: 9px;\r\n }\r\n .firstLabel {\r\n gap: 2px;\r\n }\r\n .layersVector {\r\n width: 9px;\r\n height: 10px;\r\n gap: 0px;\r\n }\r\n .cardStyle {\r\n width: 320px !important;\r\n height: 220px !important;\r\n }\r\n .header {\r\n font-size: 24px;\r\n }\r\n .detail {\r\n font-size: 10px;\r\n padding: 2px;\r\n }\r\n .Price {\r\n font-size: 18px;\r\n }\r\n .locationText {\r\n font-size: 10px;\r\n }\r\n .Vector {\r\n width: 8px;\r\n height: 16px;\r\n margin: 0px 2px 0.4px;\r\n }\r\n}\r\n\r\n@media (max-width: 280px) {\r\n .cardStyle {\r\n width: 260px !important;\r\n height: 160px !important;\r\n }\r\n .detail {\r\n margin-bottom: 5px;\r\n font-size: 0.6ch;\r\n }\r\n .Price {\r\n font-size: 9px;\r\n }\r\n .locationText {\r\n font-size: 6px;\r\n }\r\n .Vector {\r\n width: 7px;\r\n height: 10px;\r\n margin: 0px 2px 4px;\r\n }\r\n .heartVector {\r\n width: 15px;\r\n height: 20px;\r\n }\r\n}\r\n";
280
284
  styleInject(css_248z);
281
285
 
286
+ var noImageIcon = "default-property.jpg";
287
+
282
288
  function PropertyCard(props) {
283
- var _a = React.useState(false); _a[0]; _a[1];
289
+ var _a, _b;
290
+ var _c = React.useState(false); _c[0]; _c[1];
284
291
  return (React.createElement("div", { key: props.property.id, className: "card-body me-4 mb-4 position-relative cardStyle", style: {
285
- backgroundImage: "url(".concat(props.pictureUrl, ")"),
292
+ backgroundImage: "url(".concat(props.pictureUrl, ") || ").concat(noImageIcon),
286
293
  backgroundSize: "cover",
287
294
  backgroundPosition: "center",
288
295
  }, onClick: props.onClick, role: "button" },
289
296
  React.createElement("div", { className: "labelTopClass position-absolute top-0 start-0 col-sm-5 col-lg-8" },
290
297
  React.createElement("div", { className: "d-flex align-items-center ms-2 mb-1 mt-2 gap-2" },
291
298
  React.createElement("label", { className: "firstLabel d-flex flex-row justify-content-center align-items-center" },
292
- React.createElement("img", { src: blcIconArrowRight, alt: "Location Icon", className: "layersVector" }),
299
+ React.createElement("img", { src: layerIcon, alt: "Location Icon", className: "layersVector" }),
293
300
  React.createElement("span", { className: "layersText" }, "Grundriss")),
294
301
  props.property.historicalProtection && (React.createElement("label", { className: "thirdLabel d-flex flex-row justify-content-center align-items-center" },
295
302
  React.createElement("span", { className: "layersText" }, "Denkmalschutz"))),
@@ -304,9 +311,10 @@ function PropertyCard(props) {
304
311
  React.createElement("span", { className: "layersText" }, "Gäste-WC"))))),
305
312
  React.createElement("div", { className: "d-flex align-items-center position-absolute top-0 end-0 p-3" }),
306
313
  React.createElement("div", { className: "d-flex align-items-center mb-3 position-absolute bottom-0 start-0 p-2" },
307
- React.createElement("span", { className: "Price col-lg-12 col-md-12 col-sm-12 text-truncate" })),
314
+ React.createElement("span", { className: "Price col-lg-12 col-md-12 col-sm-12 text-truncate" }, (_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.askingPrice) !== null && _b !== void 0 ? _b : 0,
315
+ " \u20AC")),
308
316
  React.createElement("div", { className: "d-flex align-items-center position-absolute bottom-0 start-0 p-2" },
309
- React.createElement("img", { src: blcIconArrowRight, alt: "Location Icon", className: "Vector" }),
317
+ React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "Vector" }),
310
318
  React.createElement("span", { className: "locationText " }, props.property.city || "N/A")),
311
319
  React.createElement("div", { className: "d-flex col-lg-6 col-md-6 col-sm-5 me-lg-0 me-md-0 me-sm-3 justify-content-center mb-2 position-absolute bottom-0 end-0" },
312
320
  React.createElement("span", { className: "detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end " },
@@ -318,7 +326,7 @@ function PropertyCard(props) {
318
326
  React.createElement("br", null),
319
327
  +props.property.bathrooms,
320
328
  React.createElement("br", null),
321
- React.createElement("span", null, "Bad")),
329
+ React.createElement("span", null, "B\u00E4d")),
322
330
  React.createElement("span", { className: "detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3" },
323
331
  props.property.usableArea,
324
332
  " m\u00B2",
package/dist/index.js.map CHANGED
@@ -1 +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/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/Icon_rightArrow.svg","../src/assets/Images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/Images/chevron-left.svg","../src/assets/Images/icon_gallery.svg","../src/assets/Images/icon_map.svg","../src/assets/Images/layer_icon.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 \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"Icon_rightArrow.svg\"","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"chevron-left.svg\"","export default \"icon_gallery.svg\"","export default \"icon_map.svg\"","export default \"layer_icon.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,gBAAe;;ACAf,mBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[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/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/Icon_rightArrow.svg","../src/assets/Images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/Images/chevron-left.svg","../src/assets/Images/icon_gallery.svg","../src/assets/Images/icon_map.svg","../src/assets/Images/layer_icon.svg","../src/assets/Images/LayersIcon.svg","../src/assets/images/locationIcon.svg","../src/assets/Images/default-property.jpg"],"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 \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"Icon_rightArrow.svg\"","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"chevron-left.svg\"","export default \"icon_gallery.svg\"","export default \"icon_map.svg\"","export default \"layer_icon.svg\"","export default \"LayersIcon.svg\"","export default \"locationIcon.svg\"","export default \"default-property.jpg\""],"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,gBAAe;;ACAf,qBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;ACAf,kBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nestiq-component-library",
3
- "version": "1.0.19",
3
+ "version": "1.0.20",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "main": "dist/index.js",
package/src/assets/images/LayersIcon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="m16.855 5.147-8-4.572a.571.571 0 0 0-.567 0l-8 4.572a.571.571 0 0 0 .014 1l8 4.285a.571.571 0 0 0 .54 0l8-4.285a.571.571 0 0 0 .013-1zM8.572 9.28l-6.82-3.653 6.82-3.897 6.82 3.897-6.82 3.653z" fill="#031012"/>
3
+ <path d="M8.846 13.43 16.57 9.18V7.877l-8 4.4-8-4.4V9.18l7.725 4.249a.572.572 0 0 0 .55 0z" fill="#031012"/>
4
+ <path d="m.57 12.309 7.731 4.123a.572.572 0 0 0 .538 0l7.731-4.123v-1.295l-8 4.266-8-4.266v1.295z" fill="#031012"/>
5
+ </svg>
package/src/assets/images/heartIcon.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="30" height="27" viewBox="0 0 30 27" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M27.24 2.467a7.97 7.97 0 0 0-11.275.004l-.966.978-.958-.976-.006-.006a7.97 7.97 0 0 0-11.27 0l-.43.43a7.97 7.97 0 0 0 0 11.27l11.354 11.356 1.282 1.343.03-.03.034.033 1.201-1.268L27.67 14.168a7.979 7.979 0 0 0 0-11.27l-.43-.431zm-.98 10.292L15.003 24.018l-11.26-11.26a5.977 5.977 0 0 1 0-8.452l.431-.43a5.977 5.977 0 0 1 8.45-.003l2.372 2.415 2.383-2.412a5.977 5.977 0 0 1 8.453 0l.43.43a5.984 5.984 0 0 1 0 8.453z" fill="#fff"/>
3
+ </svg>
package/src/assets/images/locationIcon.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6 4.725a2.208 2.208 0 1 0 .001 4.416 2.208 2.208 0 0 0 0-4.416zm0 3.312a1.104 1.104 0 1 1 .001-2.208 1.104 1.104 0 0 1 0 2.208z" fill="#fff"/>
3
+ <path d="M10.243 2.687a6 6 0 0 0-9.27 7.518l4.17 6.403a1.022 1.022 0 0 0 1.713 0l4.171-6.404a6 6 0 0 0-.784-7.517zm-.14 6.915L6 15.9 1.897 9.602a4.919 4.919 0 0 1 .64-6.135 4.896 4.896 0 0 1 6.925 0 4.919 4.919 0 0 1 .64 6.135z" fill="#fff"/>
4
+ </svg>
package/src/components/PropertyCard/PropertyCard.tsx CHANGED
@@ -1,18 +1,15 @@
1
1
  import React, { useState } from "react";
2
2
  // import { FormattedMessage } from "react-intl";
3
- // import layerIcon from "../../../assets/Images/LayersIcon.svg";
4
- // import heart from "../../../assets/Images/heartIcon.svg";
5
- // import locationIcon from "../../../assets/Images/locationIcon.svg";
6
- import blcIconArrowRight from "../../assets/Images/blackarrow-Right.svg";
7
-
3
+ import layerIcon from "../../assets/Images/LayersIcon.svg";
4
+ import heart from "../../assets/Images/heart.svg";
5
+ import locationIcon from "../../assets/images/locationIcon.svg";
8
6
  import "../PropertyCard/PropertyCard.css";
9
- import noImageIcon from "../../../assets/Images/default-property.jpg";
7
+ import noImageIcon from "../../assets/Images/default-property.jpg";
10
8
  // import { formatPrice } from "../../functions/util";
11
9
 
12
10
  interface PopupProps {
13
11
  property: {
14
12
  city: string;
15
- pictures: { contentUrl: string }[];
16
13
  historicalProtection: boolean;
17
14
  basement: boolean;
18
15
  balcony: boolean;
@@ -21,8 +18,8 @@ interface PopupProps {
21
18
  bathrooms: string;
22
19
  usableArea: string;
23
20
  id: string;
24
- contentUrl: string;
25
21
  rooms: string;
22
+ askingPrice: string;
26
23
  };
27
24
  onClick: any;
28
25
  pictureUrl: any[];
@@ -31,12 +28,6 @@ interface PopupProps {
31
28
  export default function PropertyCard(props: PopupProps) {
32
29
  const [liked, setLiked] = useState(false);
33
30
 
34
- // const baseUrl = "https://api-dev.nestiq.de";
35
- // const pictureUrl =
36
- // props.property.pictures && props.property.pictures.length > 0
37
- // ? `${baseUrl}${props.property.pictures[0].contentUrl}`
38
- // : noImageIcon;
39
-
40
31
  const handleLike = () => {
41
32
  setLiked(!liked);
42
33
  };
@@ -46,7 +37,7 @@ export default function PropertyCard(props: PopupProps) {
46
37
  key={props.property.id}
47
38
  className="card-body me-4 mb-4 position-relative cardStyle"
48
39
  style={{
49
- backgroundImage: `url(${props.pictureUrl})`,
40
+ backgroundImage: `url(${props.pictureUrl}) || ${noImageIcon}`,
50
41
  backgroundSize: "cover",
51
42
  backgroundPosition: "center",
52
43
  }}
@@ -56,11 +47,7 @@ export default function PropertyCard(props: PopupProps) {
56
47
  <div className="labelTopClass position-absolute top-0 start-0 col-sm-5 col-lg-8">
57
48
  <div className="d-flex align-items-center ms-2 mb-1 mt-2 gap-2">
58
49
  <label className="firstLabel d-flex flex-row justify-content-center align-items-center">
59
- <img
60
- src={blcIconArrowRight}
61
- alt="Location Icon"
62
- className="layersVector"
63
- />
50
+ <img src={layerIcon} alt="Location Icon" className="layersVector" />
64
51
  <span className="layersText">{"Grundriss"}</span>
65
52
  </label>
66
53
  {props.property.historicalProtection && (
@@ -104,11 +91,11 @@ export default function PropertyCard(props: PopupProps) {
104
91
  </div>
105
92
  <div className="d-flex align-items-center mb-3 position-absolute bottom-0 start-0 p-2">
106
93
  <span className="Price col-lg-12 col-md-12 col-sm-12 text-truncate">
107
- {/* {formatPrice(property?.evaluation?.askingPrice ?? 0)} € */}
94
+ {props.property?.askingPrice ?? 0} €
108
95
  </span>
109
96
  </div>
110
97
  <div className="d-flex align-items-center position-absolute bottom-0 start-0 p-2">
111
- <img src={blcIconArrowRight} alt="Location Icon" className="Vector" />
98
+ <img src={locationIcon} alt="Location Icon" className="Vector" />
112
99
  <span className="locationText ">{props.property.city || "N/A"}</span>
113
100
  </div>
114
101
  <div className="d-flex col-lg-6 col-md-6 col-sm-5 me-lg-0 me-md-0 me-sm-3 justify-content-center mb-2 position-absolute bottom-0 end-0">
@@ -127,7 +114,7 @@ export default function PropertyCard(props: PopupProps) {
127
114
  /> */}
128
115
  {+props.property.bathrooms}
129
116
  <br></br>
130
- <span>Bad</span>
117
+ <span>Bäd</span>
131
118
  </span>
132
119
  <span className="detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3">
133
120
  {props.property.usableArea} m²