nestiq-component-library 1.1.164 → 1.1.166
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.
- package/dist/components/NewPropertyCard/NewPropertyCard.d.ts +6 -0
- package/dist/components/PropertyDetailsHeader/PropertyDetailsHeader.d.ts +7 -0
- package/dist/index.es.js +61 -49
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +61 -49
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/NewPropertyCard/NewPropertyCard.css +11 -3
- package/src/components/NewPropertyCard/NewPropertyCard.tsx +41 -8
- package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.css +44 -44
- package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +80 -61
|
@@ -40,6 +40,12 @@ interface PopupProps {
|
|
|
40
40
|
url: string;
|
|
41
41
|
title: string;
|
|
42
42
|
}[]) => void;
|
|
43
|
+
translations?: {
|
|
44
|
+
kaufpreis?: string;
|
|
45
|
+
wohnflache?: string;
|
|
46
|
+
zimmer?: string;
|
|
47
|
+
grundriss?: string;
|
|
48
|
+
};
|
|
43
49
|
}
|
|
44
50
|
export default function PropertyCard(props: PopupProps): React.JSX.Element;
|
|
45
51
|
export {};
|
|
@@ -2,6 +2,7 @@ import React from "react";
|
|
|
2
2
|
import "./PropertyDetailsHeader.css";
|
|
3
3
|
export interface PopupProps {
|
|
4
4
|
property: {
|
|
5
|
+
fullAddress: string;
|
|
5
6
|
city: string;
|
|
6
7
|
constructedArea: string;
|
|
7
8
|
rooms: string;
|
|
@@ -9,5 +10,11 @@ export interface PopupProps {
|
|
|
9
10
|
askingPrice: number;
|
|
10
11
|
};
|
|
11
12
|
title: string;
|
|
13
|
+
translations?: {
|
|
14
|
+
kaufpreis?: string;
|
|
15
|
+
wohnflache?: string;
|
|
16
|
+
zimmer?: string;
|
|
17
|
+
grundriss?: string;
|
|
18
|
+
};
|
|
12
19
|
}
|
|
13
20
|
export default function PropertyDetailsHeader(props: PopupProps): React.JSX.Element;
|
package/dist/index.es.js
CHANGED
|
@@ -55,7 +55,7 @@ var ShareIcon = "/static/media/icon_share_1.b9ec05630dc1087e.svg";
|
|
|
55
55
|
|
|
56
56
|
var locationIcon$1 = "/static/media/locationIconBlack.eb8e9e9226b43573.svg";
|
|
57
57
|
|
|
58
|
-
var css_248z$8 = ".
|
|
58
|
+
var css_248z$8 = ".compact_cc {\r\n padding: 32px;\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.location {\r\n left: 0;\r\n}\r\n.vector svg {\r\n width: 6px;\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.textWrapper {\r\n height: 20px;\r\n}\r\n\r\n.propText {\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@media (min-width: 300px) and (max-width: 670px) {\r\n .Pheader {\r\n height: 700px;\r\n }\r\n .compact {\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 .compact2 {\r\n position: relative !important;\r\n display: flex !important;\r\n align-self: flex-start !important;\r\n margin-left: 25px;\r\n justify-content: start !important;\r\n align-items: flex-start !important;\r\n }\r\n .compact3 {\r\n position: relative !important;\r\n display: flex !important;\r\n margin-left: 30px;\r\n margin-top: 10px !important;\r\n }\r\n .header_Text {\r\n margin-top: 0px;\r\n }\r\n .fetch_section {\r\n margin-top: 0px;\r\n height: 60px;\r\n }\r\n .propText {\r\n justify-content: start !important;\r\n align-self: flex-start !important;\r\n text-align: start !important;\r\n }\r\n .propText2 {\r\n justify-content: start !important;\r\n align-self: flex-start !important;\r\n text-align: start !important;\r\n font-weight: 1000;\r\n font-size: 24px;\r\n }\r\n}\r\n";
|
|
59
59
|
styleInject(css_248z$8);
|
|
60
60
|
|
|
61
61
|
var email = "/static/media/envelope-fill.6669c9d64183941c.svg";
|
|
@@ -131,36 +131,42 @@ function formatPropertyArea(area) {
|
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
function PropertyDetailsHeader(props) {
|
|
134
|
-
var _a, _b, _c, _d, _e;
|
|
135
|
-
var
|
|
136
|
-
|
|
134
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
135
|
+
var _l = useState(false), showPopUp = _l[0], setShowPopUp = _l[1];
|
|
136
|
+
(_a = props.property) === null || _a === void 0 ? void 0 : _a.propertyArea;
|
|
137
137
|
var handleOpenPopup = function () { return setShowPopUp(true); };
|
|
138
138
|
var handleClosePopup = function () { return setShowPopUp(false); };
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
React.createElement("
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
139
|
+
var t = {
|
|
140
|
+
kaufpreis: ((_b = props.translations) === null || _b === void 0 ? void 0 : _b.kaufpreis) || "Kaufpreis",
|
|
141
|
+
wohnflache: ((_c = props.translations) === null || _c === void 0 ? void 0 : _c.wohnflache) || "Wohnfläche",
|
|
142
|
+
zimmer: ((_d = props.translations) === null || _d === void 0 ? void 0 : _d.zimmer) || "Zimmer",
|
|
143
|
+
grundriss: ((_e = props.translations) === null || _e === void 0 ? void 0 : _e.grundriss) || "Grundriss",
|
|
144
|
+
};
|
|
145
|
+
return (React.createElement("div", { className: "compact_cc d-flex flex-column col-12 col-lg-12 mt-3 justify-content-between" },
|
|
146
|
+
React.createElement("div", { className: "col-12 d-flex flex-row" },
|
|
147
|
+
React.createElement("div", { className: "header_Text d-flex col-lg-11 col-md-11 mt-0" },
|
|
148
|
+
React.createElement("strong", null, (_f = props.title) !== null && _f !== void 0 ? _f : "-")),
|
|
149
|
+
React.createElement("div", { className: "d-flex col-lg-1 col-md-1 justify-content-end position-relative" },
|
|
150
|
+
React.createElement("img", { src: ShareIcon, alt: "share icon", className: "v_share me-3 position-absolute", onClick: handleOpenPopup }))),
|
|
151
|
+
React.createElement("div", { className: "d-flex flex-row justify-content-between" },
|
|
152
|
+
React.createElement("div", { className: "col-6 d-flex flex-row align-items-end jsutify-content-start gap-1" },
|
|
153
|
+
React.createElement("div", { className: "d-flex gap-1 justify-content-center" },
|
|
154
|
+
React.createElement("div", { className: "d-flex gap-2 align-items-center" },
|
|
155
|
+
React.createElement("img", { src: locationIcon$1, className: "", alt: "location Icon" })),
|
|
156
|
+
React.createElement("div", { className: "textWrapper" }, (_g = props.property) === null || _g === void 0 ? void 0 : _g.fullAddress))),
|
|
157
|
+
React.createElement("div", { className: "d-flex align-items-end gap-3 justify-content-end flex-row col-lg-6 col-md-6 col-sm-5" },
|
|
158
|
+
props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
|
|
159
|
+
React.createElement("span", { className: "" },
|
|
160
|
+
formatPrice((_j = (_h = props.property) === null || _h === void 0 ? void 0 : _h.askingPrice) !== null && _j !== void 0 ? _j : 0),
|
|
161
|
+
"\u20AC ",
|
|
162
|
+
React.createElement("br", null)),
|
|
163
|
+
React.createElement("span", { className: "textWrapper" }, t.kaufpreis))),
|
|
164
|
+
props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
|
|
165
|
+
React.createElement("span", { className: "" }, (_k = formatPropertyArea(props.property.constructedArea)) !== null && _k !== void 0 ? _k : 0),
|
|
166
|
+
React.createElement("span", { className: "textWrapper" }, t.wohnflache))),
|
|
167
|
+
props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
|
|
168
|
+
React.createElement("span", { className: "" }, props.property.rooms),
|
|
169
|
+
React.createElement("span", { className: "textWrapper" }, t.zimmer))))),
|
|
164
170
|
showPopUp && React.createElement(SharePopup, { onClick: function () { return handleClosePopup(); } })));
|
|
165
171
|
}
|
|
166
172
|
|
|
@@ -453,7 +459,7 @@ function PropertyCard$1(props) {
|
|
|
453
459
|
React.createElement("span", null, "Wohnfl\u00E4che")))));
|
|
454
460
|
}
|
|
455
461
|
|
|
456
|
-
var css_248z$3 = ".property-card {\r\n width: 100%;\r\n max-width: 1280px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border-radius: 32px;\r\n\r\n @media (min-width: 1500px) {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n }\r\n}\r\n\r\n.listing-compact {\r\n max-width: 750px;\r\n gap: 32px;\r\n border-radius: 0 32px 32px 0;\r\n background-color: rgba(58, 58, 58, 0.068);\r\n}\r\n\r\n.cc-height {\r\n height: 460px;\r\n}\r\n\r\n.listing-height {\r\n height: 422px;\r\n}\r\n\r\n.cardStyles {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 460px;\r\n border-radius: 32px 0px 0px 32px !important;\r\n}\r\n.cardTag {\r\n width: 75px;\r\n height: 30px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 0 24px;\r\n border-radius: 16px;\r\n border: solid 1px #313131;\r\n background-color: #fff;\r\n}\r\n.Grundriss {\r\n width: 120px;\r\n height: 30px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 14px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background: linear-gradient(to top, #000, #666);\r\n}\r\n.Frame-136 {\r\n height: 85px;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 10px 16px;\r\n border-radius: 16px;\r\n border: solid 1px rgba(0, 0, 0, 0.1);\r\n background-color: #fff;\r\n}\r\n.kontactbutton {\r\n width: 198px;\r\n height: 43px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background: linear-gradient(to top, #000, #666);\r\n}\r\n.kontact-button-text {\r\n flex-grow: 0;\r\n font-
|
|
462
|
+
var css_248z$3 = ".property-card {\r\n width: 100%;\r\n max-width: 1280px;\r\n height: auto;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border-radius: 32px;\r\n\r\n @media (min-width: 1500px) {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n }\r\n}\r\n\r\n.priceValue,\r\n.value {\r\n white-space: nowrap;\r\n}\r\n\r\n.price_label,\r\n.details {\r\n white-space: nowrap;\r\n}\r\n\r\n.listing-compact {\r\n max-width: 750px;\r\n gap: 32px;\r\n border-radius: 0 32px 32px 0;\r\n background-color: rgba(58, 58, 58, 0.068);\r\n}\r\n\r\n.cc-height {\r\n height: 460px;\r\n}\r\n\r\n.listing-height {\r\n height: 422px;\r\n}\r\n\r\n.cardStyles {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 460px;\r\n border-radius: 32px 0px 0px 32px !important;\r\n}\r\n.cardTag {\r\n width: 75px;\r\n height: 30px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 0 24px;\r\n border-radius: 16px;\r\n border: solid 1px #313131;\r\n background-color: #fff;\r\n}\r\n.Grundriss {\r\n width: 120px;\r\n height: 30px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 14px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background: linear-gradient(to top, #000, #666);\r\n}\r\n.Frame-136 {\r\n height: 85px;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 10px 16px;\r\n border-radius: 16px;\r\n border: solid 1px rgba(0, 0, 0, 0.1);\r\n background-color: #fff;\r\n}\r\n.kontactbutton {\r\n width: 198px;\r\n height: 43px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background: linear-gradient(to top, #000, #666);\r\n}\r\n.kontact-button-text {\r\n flex-grow: 0;\r\n font-size: 16px;\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.propertyTitle {\r\n display: flex;\r\n flex-grow: 0;\r\n font-size: 24px;\r\n font-weight: 580;\r\n font-stretch: normal;\r\n font-style: normal;\r\n line-height: normal;\r\n letter-spacing: normal;\r\n text-align: start;\r\n color: #313131;\r\n}\r\n\r\n.chipLabel {\r\n height: 30px;\r\n padding: 0 10px;\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 display: flex;\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 padding: 0 8px;\r\n font-size: 14px;\r\n color: #1b1b1b;\r\n line-height: 2.14;\r\n text-wrap: nowrap;\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: #161410;\r\n background-color: #181716;\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\r\n.location-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.location-icon {\r\n width: 16px;\r\n height: 21px;\r\n flex-grow: 0;\r\n object-fit: contain;\r\n}\r\n\r\n.locationTexts {\r\n font-size: 16px;\r\n color: #344041;\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: #ffffff;\r\n}\r\n\r\n.details {\r\n font-size: 16px;\r\n color: #344041;\r\n}\r\n\r\n.price_label {\r\n font-size: 16px;\r\n text-align: left;\r\n color: #344041;\r\n}\r\n\r\n.value {\r\n font-size: 20px;\r\n font-weight: 500;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n line-height: 1;\r\n}\r\n.priceValue {\r\n font-size: 20px;\r\n font-weight: 500;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n line-height: 1;\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.rightConer {\r\n width: 200px;\r\n}\r\n.labelTopClass {\r\n height: 32px;\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 padding: 0 2rem;\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";
|
|
457
463
|
styleInject(css_248z$3);
|
|
458
464
|
|
|
459
465
|
var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
|
|
@@ -471,15 +477,15 @@ var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
|
|
|
471
477
|
var immooly = "/static/media/imooly.b46514ac970e6052.svg";
|
|
472
478
|
|
|
473
479
|
function PropertyCard(props) {
|
|
474
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
475
|
-
var _j = useState(false); _j[0]; _j[1];
|
|
476
|
-
var _k = useState(null), mainImage = _k[0], setMainImage = _k[1];
|
|
477
|
-
var _l = useState(0), currentImageIndex = _l[0], setCurrentImageIndex = _l[1];
|
|
478
|
-
var imageListRef = useRef(null);
|
|
479
|
-
var _m = useState(false); _m[0]; _m[1];
|
|
480
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
480
481
|
var _o = useState(false); _o[0]; _o[1];
|
|
481
|
-
var _p = useState(
|
|
482
|
-
var _q = useState(
|
|
482
|
+
var _p = useState(null), mainImage = _p[0], setMainImage = _p[1];
|
|
483
|
+
var _q = useState(0), currentImageIndex = _q[0], setCurrentImageIndex = _q[1];
|
|
484
|
+
var imageListRef = useRef(null);
|
|
485
|
+
var _r = useState(false); _r[0]; _r[1];
|
|
486
|
+
var _s = useState(false); _s[0]; _s[1];
|
|
487
|
+
var _t = useState(false), sharePopUp = _t[0], setSharePopUp = _t[1];
|
|
488
|
+
var _u = useState(false), isImagePopupOpen = _u[0], setIsImagePopupOpen = _u[1];
|
|
483
489
|
var pictureUrls = ((_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.pictures) === null || _b === void 0 ? void 0 : _b.length) > 0
|
|
484
490
|
? props.property.pictures
|
|
485
491
|
.filter(function (picture) { return picture.pictureType.id === 2; })
|
|
@@ -533,6 +539,12 @@ function PropertyCard(props) {
|
|
|
533
539
|
}
|
|
534
540
|
};
|
|
535
541
|
// const boosted = "true";
|
|
542
|
+
var t = {
|
|
543
|
+
kaufpreis: ((_d = props.translations) === null || _d === void 0 ? void 0 : _d.kaufpreis) || "Kaufpreis",
|
|
544
|
+
wohnflache: ((_e = props.translations) === null || _e === void 0 ? void 0 : _e.wohnflache) || "Wohnfläche",
|
|
545
|
+
zimmer: ((_f = props.translations) === null || _f === void 0 ? void 0 : _f.zimmer) || "Zimmer",
|
|
546
|
+
grundriss: ((_g = props.translations) === null || _g === void 0 ? void 0 : _g.grundriss) || "Grundriss",
|
|
547
|
+
};
|
|
536
548
|
return (React.createElement("div", { className: "d-flex flex-row property-card" },
|
|
537
549
|
React.createElement("div", { className: "d-flex flex-column col-md-6 col-lg-6" },
|
|
538
550
|
React.createElement("div", { key: props.property.id, className: "card-bod position-relative cardStyles h-100 w-100", style: {
|
|
@@ -552,14 +564,14 @@ function PropertyCard(props) {
|
|
|
552
564
|
React.createElement("div", { className: "Grundriss kontact-button-text ms-2 ", role: "button", onClick: function () { return handleFloorPlanButton(); }, style: { marginBottom: "16px" } },
|
|
553
565
|
React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
|
|
554
566
|
" ",
|
|
555
|
-
|
|
567
|
+
t.grundriss)))),
|
|
556
568
|
React.createElement("div", { className: "listing-compact d-flex align-self-end flex-column col-6 ".concat(props.Impliment ? "cc-height" : "listing-height") },
|
|
557
569
|
React.createElement("div", { className: "d-flex flex-column gap-3 mb-4 justify-content-between", style: { height: "104px" } },
|
|
558
570
|
React.createElement("div", { className: "d-flex flex-row justify-content-between gap-2" },
|
|
559
571
|
React.createElement("span", { className: "propertyTitle align-items-start ", style: {
|
|
560
572
|
paddingLeft: "32px",
|
|
561
573
|
paddingTop: "32px",
|
|
562
|
-
}, onClick: props.onClick, role: "button" }, (
|
|
574
|
+
}, onClick: props.onClick, role: "button" }, (_h = props.property.expose) === null || _h === void 0 ? void 0 : _h.title),
|
|
563
575
|
React.createElement("div", { className: "d-flex gap-2", style: {
|
|
564
576
|
paddingRight: "32px",
|
|
565
577
|
paddingTop: "21px",
|
|
@@ -575,21 +587,21 @@ function PropertyCard(props) {
|
|
|
575
587
|
React.createElement("div", { className: "location-wrapper" },
|
|
576
588
|
React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
|
|
577
589
|
React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A")))),
|
|
578
|
-
React.createElement("div", { className: "d-flex
|
|
590
|
+
React.createElement("div", { className: "d-flex flex-row justify-content-between mt-3", style: {
|
|
579
591
|
paddingLeft: "32px",
|
|
580
592
|
paddingRight: "32px",
|
|
581
593
|
} },
|
|
582
|
-
React.createElement("span", { className: "priceValue col-lg-5 col-md-5 col-sm-6
|
|
583
|
-
formatPrice((
|
|
594
|
+
React.createElement("span", { className: "priceValue col-lg-5 col-md-5 col-sm-6", style: { whiteSpace: "nowrap" } },
|
|
595
|
+
formatPrice((_l = (_k = (_j = props.property) === null || _j === void 0 ? void 0 : _j.evaluation) === null || _k === void 0 ? void 0 : _k.askingPrice) !== null && _l !== void 0 ? _l : 0),
|
|
584
596
|
" \u20AC",
|
|
585
|
-
React.createElement("div", { className: "price_label" },
|
|
586
|
-
React.createElement("span", { className: "text-dark value col-lg-5 col-md-5 col-sm-7" },
|
|
597
|
+
React.createElement("div", { className: "price_label", style: { whiteSpace: "nowrap" } }, t.kaufpreis)),
|
|
598
|
+
React.createElement("span", { className: "text-dark value col-lg-5 col-md-5 col-sm-7", style: { whiteSpace: "nowrap" } },
|
|
587
599
|
props.property.constructedArea,
|
|
588
600
|
" m\u00B2",
|
|
589
|
-
React.createElement("div", { className: "details" },
|
|
590
|
-
React.createElement("span", { className: "text-dark value col-lg-
|
|
591
|
-
+((
|
|
592
|
-
React.createElement("div", { className: "details" },
|
|
601
|
+
React.createElement("div", { className: "details", style: { whiteSpace: "nowrap" } }, t.wohnflache)),
|
|
602
|
+
React.createElement("span", { className: "text-dark value text-center col-lg-2 col-md-2 col-sm-5 text-truncate", style: { whiteSpace: "nowrap" } },
|
|
603
|
+
+((_m = props.property) === null || _m === void 0 ? void 0 : _m.rooms),
|
|
604
|
+
React.createElement("div", { className: "details text-center", style: { whiteSpace: "nowrap" } }, t.zimmer))),
|
|
593
605
|
React.createElement("div", { className: "labelTopClass d-flex start-0 col-sm-5 col-lg-8 ", style: { padding: "0 28px" } },
|
|
594
606
|
React.createElement("div", { className: " align-items-center d-flex flex-row gap-3" },
|
|
595
607
|
props.property.historicalProtection && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
|