nestiq-component-library 1.1.165 → 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/PropertyDetailsHeader/PropertyDetailsHeader.d.ts +7 -0
- package/dist/index.es.js +35 -29
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +35 -29
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.css +44 -44
- package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +80 -61
package/dist/index.js
CHANGED
|
@@ -57,7 +57,7 @@ var ShareIcon = "/static/media/icon_share_1.b9ec05630dc1087e.svg";
|
|
|
57
57
|
|
|
58
58
|
var locationIcon$1 = "/static/media/locationIconBlack.eb8e9e9226b43573.svg";
|
|
59
59
|
|
|
60
|
-
var css_248z$8 = ".
|
|
60
|
+
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";
|
|
61
61
|
styleInject(css_248z$8);
|
|
62
62
|
|
|
63
63
|
var email = "/static/media/envelope-fill.6669c9d64183941c.svg";
|
|
@@ -133,36 +133,42 @@ function formatPropertyArea(area) {
|
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
function PropertyDetailsHeader(props) {
|
|
136
|
-
var _a, _b, _c, _d, _e;
|
|
137
|
-
var
|
|
138
|
-
|
|
136
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
137
|
+
var _l = React.useState(false), showPopUp = _l[0], setShowPopUp = _l[1];
|
|
138
|
+
(_a = props.property) === null || _a === void 0 ? void 0 : _a.propertyArea;
|
|
139
139
|
var handleOpenPopup = function () { return setShowPopUp(true); };
|
|
140
140
|
var handleClosePopup = function () { return setShowPopUp(false); };
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
React.createElement("
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
141
|
+
var t = {
|
|
142
|
+
kaufpreis: ((_b = props.translations) === null || _b === void 0 ? void 0 : _b.kaufpreis) || "Kaufpreis",
|
|
143
|
+
wohnflache: ((_c = props.translations) === null || _c === void 0 ? void 0 : _c.wohnflache) || "Wohnfläche",
|
|
144
|
+
zimmer: ((_d = props.translations) === null || _d === void 0 ? void 0 : _d.zimmer) || "Zimmer",
|
|
145
|
+
grundriss: ((_e = props.translations) === null || _e === void 0 ? void 0 : _e.grundriss) || "Grundriss",
|
|
146
|
+
};
|
|
147
|
+
return (React.createElement("div", { className: "compact_cc d-flex flex-column col-12 col-lg-12 mt-3 justify-content-between" },
|
|
148
|
+
React.createElement("div", { className: "col-12 d-flex flex-row" },
|
|
149
|
+
React.createElement("div", { className: "header_Text d-flex col-lg-11 col-md-11 mt-0" },
|
|
150
|
+
React.createElement("strong", null, (_f = props.title) !== null && _f !== void 0 ? _f : "-")),
|
|
151
|
+
React.createElement("div", { className: "d-flex col-lg-1 col-md-1 justify-content-end position-relative" },
|
|
152
|
+
React.createElement("img", { src: ShareIcon, alt: "share icon", className: "v_share me-3 position-absolute", onClick: handleOpenPopup }))),
|
|
153
|
+
React.createElement("div", { className: "d-flex flex-row justify-content-between" },
|
|
154
|
+
React.createElement("div", { className: "col-6 d-flex flex-row align-items-end jsutify-content-start gap-1" },
|
|
155
|
+
React.createElement("div", { className: "d-flex gap-1 justify-content-center" },
|
|
156
|
+
React.createElement("div", { className: "d-flex gap-2 align-items-center" },
|
|
157
|
+
React.createElement("img", { src: locationIcon$1, className: "", alt: "location Icon" })),
|
|
158
|
+
React.createElement("div", { className: "textWrapper" }, (_g = props.property) === null || _g === void 0 ? void 0 : _g.fullAddress))),
|
|
159
|
+
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" },
|
|
160
|
+
props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
|
|
161
|
+
React.createElement("span", { className: "" },
|
|
162
|
+
formatPrice((_j = (_h = props.property) === null || _h === void 0 ? void 0 : _h.askingPrice) !== null && _j !== void 0 ? _j : 0),
|
|
163
|
+
"\u20AC ",
|
|
164
|
+
React.createElement("br", null)),
|
|
165
|
+
React.createElement("span", { className: "textWrapper" }, t.kaufpreis))),
|
|
166
|
+
props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
|
|
167
|
+
React.createElement("span", { className: "" }, (_k = formatPropertyArea(props.property.constructedArea)) !== null && _k !== void 0 ? _k : 0),
|
|
168
|
+
React.createElement("span", { className: "textWrapper" }, t.wohnflache))),
|
|
169
|
+
props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
|
|
170
|
+
React.createElement("span", { className: "" }, props.property.rooms),
|
|
171
|
+
React.createElement("span", { className: "textWrapper" }, t.zimmer))))),
|
|
166
172
|
showPopUp && React.createElement(SharePopup, { onClick: function () { return handleClosePopup(); } })));
|
|
167
173
|
}
|
|
168
174
|
|