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
|
@@ -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
|
|