nestiq-component-library 1.0.17 → 1.0.19

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 (11) hide show
  1. package/dist/components/PropertyCard/PropertyCard.d.ts +24 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.es.js +59 -9
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.js +59 -8
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/PropertyCard/PropertyCard.css +268 -0
  9. package/src/components/PropertyCard/PropertyCard.tsx +141 -0
  10. package/src/components/PropertyCard/PropertyDaet.json +1210 -0
  11. package/src/index.tsx +2 -0
package/dist/components/PropertyCard/PropertyCard.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import React from "react";
2
+ import "../PropertyCard/PropertyCard.css";
3
+ interface PopupProps {
4
+ property: {
5
+ city: string;
6
+ pictures: {
7
+ contentUrl: string;
8
+ }[];
9
+ historicalProtection: boolean;
10
+ basement: boolean;
11
+ balcony: boolean;
12
+ terrace: boolean;
13
+ guestBathroom: boolean;
14
+ bathrooms: string;
15
+ usableArea: string;
16
+ id: string;
17
+ contentUrl: string;
18
+ rooms: string;
19
+ };
20
+ onClick: any;
21
+ pictureUrl: any[];
22
+ }
23
+ export default function PropertyCard(props: PopupProps): React.JSX.Element;
24
+ export {};
package/dist/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export { default as Button } from "./components/Button/Button";
2
2
  export { default as Popup } from "./components/Popup/Popup";
3
3
  export { default as PropertyDetailsHeader } from "./components/PropertyDetailsHeader/PropertyDetailsHeader";
4
4
  export { default as PropertyImageList } from "./components/PropertyImageList//PropertyImageList";
5
+ export { default as PropertyCard } from "./components/PropertyCard//PropertyCard";
package/dist/index.es.js CHANGED
@@ -34,8 +34,8 @@ function styleInject(css, ref) {
34
34
  }
35
35
  }
36
36
 
37
- var css_248z$3 = ".popup-overlay {\r\n position: fixed; /* Fixed position to cover the whole screen */\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.5); /* Semi-transparent background */\r\n display: flex; /* Flexbox to center the popup */\r\n justify-content: center; /* Center horizontally */\r\n align-items: center; /* Center vertically */\r\n z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n height: 48px;\r\n font-size: 32px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n width: 16px;\r\n height: 16px;\r\n cursor: pointer;\r\n}\r\n";
38
- styleInject(css_248z$3);
37
+ var css_248z$4 = ".popup-overlay {\r\n position: fixed; /* Fixed position to cover the whole screen */\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.5); /* Semi-transparent background */\r\n display: flex; /* Flexbox to center the popup */\r\n justify-content: center; /* Center horizontally */\r\n align-items: center; /* Center vertically */\r\n z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n height: 48px;\r\n font-size: 32px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n width: 16px;\r\n height: 16px;\r\n cursor: pointer;\r\n}\r\n";
38
+ styleInject(css_248z$4);
39
39
 
40
40
  var Popup = function (_a) {
41
41
  var onCloseClick = _a.onCloseClick, children = _a.children;
@@ -50,8 +50,8 @@ var ShareIcon = "icon_share_1.svg";
50
50
 
51
51
  var locationIcon = "locationIconBlack.svg";
52
52
 
53
- var css_248z$2 = ".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
- styleInject(css_248z$2);
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
+ styleInject(css_248z$3);
55
55
 
56
56
  function PropertyDetailsHeader(props) {
57
57
  var _a = useState(false), showPopUp = _a[0], setShowPopUp = _a[1];
@@ -103,11 +103,11 @@ var iconMap = "icon_map.svg";
103
103
 
104
104
  var iconLayers = "layer_icon.svg";
105
105
 
106
- var css_248z$1 = ".mainImage {\r\n\theight: 80%;\r\n\t\r\n}\r\n\r\n.secondList {\r\n\theight: 20%;\r\n\t\t\r\n\r\n}\r\n\r\n.listImageButton {\r\n\tbackground-color: black;\r\n\talign-items: center !important;\r\n\tjustify-content: center !important;\r\n}\r\n\r\n.listImgText {\r\n\theight: 30px;\r\n\tfont-size: 14px;\r\n\tline-height: 2.14;\r\n\tcolor: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n\theight: 30px;\r\n\tfill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tpadding: 23px 8px;\r\n\tbackground-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n\r\n.imagesArray {\r\n\tbackground-size: 'cover' !important;\r\n}\r\n@media (min-width: 800px) {\r\n .Pimagelist {\r\n max-width: 1800px;\r\n \r\n \r\n }\r\n}\r\n\r\n\r\n\r\n\r\n";
107
- styleInject(css_248z$1);
106
+ var css_248z$2 = ".mainImage {\r\n\theight: 80%;\r\n\t\r\n}\r\n\r\n.secondList {\r\n\theight: 20%;\r\n\t\t\r\n\r\n}\r\n\r\n.listImageButton {\r\n\tbackground-color: black;\r\n\talign-items: center !important;\r\n\tjustify-content: center !important;\r\n}\r\n\r\n.listImgText {\r\n\theight: 30px;\r\n\tfont-size: 14px;\r\n\tline-height: 2.14;\r\n\tcolor: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n\theight: 30px;\r\n\tfill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tpadding: 23px 8px;\r\n\tbackground-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n\r\n.imagesArray {\r\n\tbackground-size: 'cover' !important;\r\n}\r\n@media (min-width: 800px) {\r\n .Pimagelist {\r\n max-width: 1800px;\r\n \r\n \r\n }\r\n}\r\n\r\n\r\n\r\n\r\n";
107
+ styleInject(css_248z$2);
108
108
 
109
- var css_248z = ".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";
110
- styleInject(css_248z);
109
+ 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";
110
+ styleInject(css_248z$1);
111
111
 
112
112
  function ImageListPopup(props) {
113
113
  var _a = useState(true), showPopUp = _a[0], setShowPopUp = _a[1];
@@ -274,5 +274,55 @@ 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
- export { Button, Popup, PropertyDetailsHeader, PropertyImageList };
277
+ 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
+ styleInject(css_248z);
279
+
280
+ function PropertyCard(props) {
281
+ var _a = useState(false); _a[0]; _a[1];
282
+ 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, ")"),
284
+ backgroundSize: "cover",
285
+ backgroundPosition: "center",
286
+ }, onClick: props.onClick, role: "button" },
287
+ React.createElement("div", { className: "labelTopClass position-absolute top-0 start-0 col-sm-5 col-lg-8" },
288
+ React.createElement("div", { className: "d-flex align-items-center ms-2 mb-1 mt-2 gap-2" },
289
+ 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" }),
291
+ React.createElement("span", { className: "layersText" }, "Grundriss")),
292
+ props.property.historicalProtection && (React.createElement("label", { className: "thirdLabel d-flex flex-row justify-content-center align-items-center" },
293
+ React.createElement("span", { className: "layersText" }, "Denkmalschutz"))),
294
+ props.property.basement && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
295
+ React.createElement("span", { className: "layersText " }, "Keller"))),
296
+ props.property.balcony && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
297
+ React.createElement("span", { className: "layersText " }, "Balkon")))),
298
+ React.createElement("div", { className: "d-flex align-items-center ms-2 start-0 gap-2" },
299
+ props.property.terrace && (React.createElement("label", { className: "thirdLabel d-flex flex-row justify-content-center align-items-center " },
300
+ React.createElement("span", { className: "layersText" }, "Terrace"))),
301
+ props.property.guestBathroom && (React.createElement("label", { className: "fourthLabel d-flex flex-row justify-content-center align-items-center " },
302
+ React.createElement("span", { className: "layersText" }, "Gäste-WC"))))),
303
+ React.createElement("div", { className: "d-flex align-items-center position-absolute top-0 end-0 p-3" }),
304
+ 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" })),
306
+ 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" }),
308
+ React.createElement("span", { className: "locationText " }, props.property.city || "N/A")),
309
+ 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
+ React.createElement("span", { className: "detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end " },
311
+ +props.property.rooms,
312
+ React.createElement("br", null),
313
+ React.createElement("span", null, "Zimmer")),
314
+ React.createElement("span", { className: "detail col-lg-3 col-md-3 col-sm-4 text-truncate " },
315
+ +props.property.bathrooms,
316
+ React.createElement("br", null),
317
+ +props.property.bathrooms,
318
+ React.createElement("br", null),
319
+ React.createElement("span", null, "Bad")),
320
+ React.createElement("span", { className: "detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3" },
321
+ props.property.usableArea,
322
+ " m\u00B2",
323
+ React.createElement("br", null),
324
+ React.createElement("span", null, "Wohnfl\u00E4che")))));
325
+ }
326
+
327
+ export { Button, Popup, PropertyCard, PropertyDetailsHeader, PropertyImageList };
278
328
  //# sourceMappingURL=index.es.js.map
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"],"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]}
package/dist/index.js CHANGED
@@ -36,8 +36,8 @@ function styleInject(css, ref) {
36
36
  }
37
37
  }
38
38
 
39
- var css_248z$3 = ".popup-overlay {\r\n position: fixed; /* Fixed position to cover the whole screen */\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.5); /* Semi-transparent background */\r\n display: flex; /* Flexbox to center the popup */\r\n justify-content: center; /* Center horizontally */\r\n align-items: center; /* Center vertically */\r\n z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n height: 48px;\r\n font-size: 32px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n width: 16px;\r\n height: 16px;\r\n cursor: pointer;\r\n}\r\n";
40
- styleInject(css_248z$3);
39
+ var css_248z$4 = ".popup-overlay {\r\n position: fixed; /* Fixed position to cover the whole screen */\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.5); /* Semi-transparent background */\r\n display: flex; /* Flexbox to center the popup */\r\n justify-content: center; /* Center horizontally */\r\n align-items: center; /* Center vertically */\r\n z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n height: 48px;\r\n font-size: 32px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n width: 16px;\r\n height: 16px;\r\n cursor: pointer;\r\n}\r\n";
40
+ styleInject(css_248z$4);
41
41
 
42
42
  var Popup = function (_a) {
43
43
  var onCloseClick = _a.onCloseClick, children = _a.children;
@@ -52,8 +52,8 @@ var ShareIcon = "icon_share_1.svg";
52
52
 
53
53
  var locationIcon = "locationIconBlack.svg";
54
54
 
55
- var css_248z$2 = ".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
- styleInject(css_248z$2);
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
+ styleInject(css_248z$3);
57
57
 
58
58
  function PropertyDetailsHeader(props) {
59
59
  var _a = React.useState(false), showPopUp = _a[0], setShowPopUp = _a[1];
@@ -105,11 +105,11 @@ var iconMap = "icon_map.svg";
105
105
 
106
106
  var iconLayers = "layer_icon.svg";
107
107
 
108
- var css_248z$1 = ".mainImage {\r\n\theight: 80%;\r\n\t\r\n}\r\n\r\n.secondList {\r\n\theight: 20%;\r\n\t\t\r\n\r\n}\r\n\r\n.listImageButton {\r\n\tbackground-color: black;\r\n\talign-items: center !important;\r\n\tjustify-content: center !important;\r\n}\r\n\r\n.listImgText {\r\n\theight: 30px;\r\n\tfont-size: 14px;\r\n\tline-height: 2.14;\r\n\tcolor: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n\theight: 30px;\r\n\tfill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tpadding: 23px 8px;\r\n\tbackground-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n\r\n.imagesArray {\r\n\tbackground-size: 'cover' !important;\r\n}\r\n@media (min-width: 800px) {\r\n .Pimagelist {\r\n max-width: 1800px;\r\n \r\n \r\n }\r\n}\r\n\r\n\r\n\r\n\r\n";
109
- styleInject(css_248z$1);
108
+ var css_248z$2 = ".mainImage {\r\n\theight: 80%;\r\n\t\r\n}\r\n\r\n.secondList {\r\n\theight: 20%;\r\n\t\t\r\n\r\n}\r\n\r\n.listImageButton {\r\n\tbackground-color: black;\r\n\talign-items: center !important;\r\n\tjustify-content: center !important;\r\n}\r\n\r\n.listImgText {\r\n\theight: 30px;\r\n\tfont-size: 14px;\r\n\tline-height: 2.14;\r\n\tcolor: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n\theight: 30px;\r\n\tfill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tpadding: 23px 8px;\r\n\tbackground-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n\r\n.imagesArray {\r\n\tbackground-size: 'cover' !important;\r\n}\r\n@media (min-width: 800px) {\r\n .Pimagelist {\r\n max-width: 1800px;\r\n \r\n \r\n }\r\n}\r\n\r\n\r\n\r\n\r\n";
109
+ styleInject(css_248z$2);
110
110
 
111
- var css_248z = ".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";
112
- styleInject(css_248z);
111
+ 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";
112
+ styleInject(css_248z$1);
113
113
 
114
114
  function ImageListPopup(props) {
115
115
  var _a = React.useState(true), showPopUp = _a[0], setShowPopUp = _a[1];
@@ -276,8 +276,59 @@ 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 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
+ styleInject(css_248z);
281
+
282
+ function PropertyCard(props) {
283
+ var _a = React.useState(false); _a[0]; _a[1];
284
+ 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, ")"),
286
+ backgroundSize: "cover",
287
+ backgroundPosition: "center",
288
+ }, onClick: props.onClick, role: "button" },
289
+ React.createElement("div", { className: "labelTopClass position-absolute top-0 start-0 col-sm-5 col-lg-8" },
290
+ React.createElement("div", { className: "d-flex align-items-center ms-2 mb-1 mt-2 gap-2" },
291
+ 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" }),
293
+ React.createElement("span", { className: "layersText" }, "Grundriss")),
294
+ props.property.historicalProtection && (React.createElement("label", { className: "thirdLabel d-flex flex-row justify-content-center align-items-center" },
295
+ React.createElement("span", { className: "layersText" }, "Denkmalschutz"))),
296
+ props.property.basement && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
297
+ React.createElement("span", { className: "layersText " }, "Keller"))),
298
+ props.property.balcony && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
299
+ React.createElement("span", { className: "layersText " }, "Balkon")))),
300
+ React.createElement("div", { className: "d-flex align-items-center ms-2 start-0 gap-2" },
301
+ props.property.terrace && (React.createElement("label", { className: "thirdLabel d-flex flex-row justify-content-center align-items-center " },
302
+ React.createElement("span", { className: "layersText" }, "Terrace"))),
303
+ props.property.guestBathroom && (React.createElement("label", { className: "fourthLabel d-flex flex-row justify-content-center align-items-center " },
304
+ React.createElement("span", { className: "layersText" }, "Gäste-WC"))))),
305
+ React.createElement("div", { className: "d-flex align-items-center position-absolute top-0 end-0 p-3" }),
306
+ 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" })),
308
+ 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" }),
310
+ React.createElement("span", { className: "locationText " }, props.property.city || "N/A")),
311
+ 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
+ React.createElement("span", { className: "detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end " },
313
+ +props.property.rooms,
314
+ React.createElement("br", null),
315
+ React.createElement("span", null, "Zimmer")),
316
+ React.createElement("span", { className: "detail col-lg-3 col-md-3 col-sm-4 text-truncate " },
317
+ +props.property.bathrooms,
318
+ React.createElement("br", null),
319
+ +props.property.bathrooms,
320
+ React.createElement("br", null),
321
+ React.createElement("span", null, "Bad")),
322
+ React.createElement("span", { className: "detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3" },
323
+ props.property.usableArea,
324
+ " m\u00B2",
325
+ React.createElement("br", null),
326
+ React.createElement("span", null, "Wohnfl\u00E4che")))));
327
+ }
328
+
279
329
  exports.Button = Button;
280
330
  exports.Popup = Popup;
331
+ exports.PropertyCard = PropertyCard;
281
332
  exports.PropertyDetailsHeader = PropertyDetailsHeader;
282
333
  exports.PropertyImageList = PropertyImageList;
283
334
  //# sourceMappingURL=index.js.map
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"],"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]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nestiq-component-library",
3
- "version": "1.0.17",
3
+ "version": "1.0.19",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "main": "dist/index.js",
package/src/components/PropertyCard/PropertyCard.css ADDED
@@ -0,0 +1,268 @@
1
+ .padding-global {
2
+ height: 737px !important;
3
+ padding: 0 40px;
4
+ }
5
+ .header {
6
+ font-size: 48px;
7
+ font-weight: 600;
8
+ color: #1b1b1b;
9
+ }
10
+
11
+ .firstLabel {
12
+ width: 100px;
13
+ height: 25px;
14
+ gap: 6px;
15
+ border-radius: 16px;
16
+ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
17
+ border: solid 1px #031012 !important;
18
+ background-color: #ffb525;
19
+ }
20
+
21
+ .secondLabel {
22
+ width: 85px;
23
+ height: 25px;
24
+ padding: 0 7px;
25
+ border-radius: 16px;
26
+ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
27
+ border: solid 1px #000;
28
+ background-color: #fff;
29
+ }
30
+
31
+ .thirdLabel {
32
+ width: 90px;
33
+ height: 25px;
34
+ border-radius: 16px;
35
+ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
36
+ border: solid 1px #000;
37
+ background-color: #fff;
38
+ }
39
+
40
+ .fourthLabel {
41
+ width: 100px;
42
+ height: 25px;
43
+ border-radius: 16px;
44
+ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
45
+ border: solid 1px #000;
46
+ background-color: #fff;
47
+ }
48
+
49
+ .layersVector {
50
+ width: 15.1px;
51
+ height: 16px;
52
+ }
53
+
54
+ .layersText {
55
+ font-size: 14px;
56
+ color: #1b1b1b;
57
+ }
58
+
59
+ .style-img {
60
+ object-fit: cover;
61
+ border-radius: 30px !important;
62
+ }
63
+
64
+ .Vector {
65
+ width: 12px;
66
+ height: 16.1px;
67
+ flex-grow: 0;
68
+ margin: 0.4px 6px 0.4px 0;
69
+ }
70
+
71
+ .customButton {
72
+ width: 262px;
73
+ height: 43px;
74
+ color: #000;
75
+ cursor: pointer;
76
+ border-color: #ffb525;
77
+ background-color: #ffb525;
78
+ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
79
+ }
80
+ .button_text {
81
+ font-size: 16px;
82
+ font-weight: 500;
83
+ color: #1b1b1b;
84
+ }
85
+
86
+ .heartVector {
87
+ width: 23px;
88
+ height: 26.7px;
89
+ cursor: pointer;
90
+ }
91
+
92
+ .heartVector.liked {
93
+ fill: rgb(255, 255, 255) !important;
94
+ }
95
+ .locationText {
96
+ font-size: 14px;
97
+ color: white;
98
+ text-align: center;
99
+ }
100
+
101
+ .arrowVector {
102
+ width: 23px;
103
+ height: 23px;
104
+ flex-grow: 0;
105
+ object-fit: contain;
106
+ }
107
+
108
+ .Price {
109
+ font-size: 26px;
110
+ font-weight: 500;
111
+ font-stretch: normal;
112
+ font-style: normal;
113
+ line-height: normal;
114
+ letter-spacing: normal;
115
+ text-align: center;
116
+ color: #fff;
117
+ }
118
+
119
+ .detail {
120
+ font-size: 12px;
121
+ text-align: center;
122
+ color: #fff;
123
+ }
124
+
125
+ .class {
126
+ background-color: #1b1b1b;
127
+ }
128
+
129
+ .header {
130
+ height: 64px;
131
+ justify-content: center;
132
+ }
133
+
134
+ .cardStyle {
135
+ width: 405px;
136
+ max-width: 2405px;
137
+ display: flex;
138
+ align-items: center;
139
+ justify-content: center;
140
+ height: 350px;
141
+ border-radius: 30px !important;
142
+ }
143
+
144
+ .rightConer {
145
+ width: 200px;
146
+ }
147
+ @media all and (min-width: 2560px) {
148
+ .header {
149
+ font-size: 38px;
150
+
151
+ display: flex;
152
+ }
153
+ .cardStyle {
154
+ gap: 0px;
155
+ width: 350px;
156
+ height: 300px;
157
+ /* margin-left: 250px; */
158
+ }
159
+ }
160
+ @media (max-width: 1399px) {
161
+ .header {
162
+ font-size: 38px;
163
+ align-self: center;
164
+ margin-left: 150px;
165
+ }
166
+ .cardStyle {
167
+ gap: 0px;
168
+ width: 350px;
169
+ height: 300px;
170
+ }
171
+ }
172
+
173
+ @media (max-width: 1199px) {
174
+ .header {
175
+ font-size: 38px;
176
+ }
177
+ .cardStyle {
178
+ width: 300px;
179
+ height: 250px;
180
+ }
181
+ }
182
+
183
+ @media (max-width: 575px) {
184
+ .detail {
185
+ font-size: 11px;
186
+ padding: 2px;
187
+ }
188
+ .Price {
189
+ font-size: 19px;
190
+ }
191
+ .header {
192
+ font-size: 28px;
193
+ }
194
+ .locationText {
195
+ font-size: 12px;
196
+ }
197
+ .customButton {
198
+ width: 200px !important;
199
+ }
200
+ .button_text {
201
+ font-size: 13px;
202
+ }
203
+ }
204
+
205
+ @media (max-width: 375px) {
206
+ .labelTopClass {
207
+ width: 105px !important;
208
+ }
209
+ .layersText {
210
+ font-size: 9px;
211
+ }
212
+ .firstLabel {
213
+ gap: 2px;
214
+ }
215
+ .layersVector {
216
+ width: 9px;
217
+ height: 10px;
218
+ gap: 0px;
219
+ }
220
+ .cardStyle {
221
+ width: 320px !important;
222
+ height: 220px !important;
223
+ }
224
+ .header {
225
+ font-size: 24px;
226
+ }
227
+ .detail {
228
+ font-size: 10px;
229
+ padding: 2px;
230
+ }
231
+ .Price {
232
+ font-size: 18px;
233
+ }
234
+ .locationText {
235
+ font-size: 10px;
236
+ }
237
+ .Vector {
238
+ width: 8px;
239
+ height: 16px;
240
+ margin: 0px 2px 0.4px;
241
+ }
242
+ }
243
+
244
+ @media (max-width: 280px) {
245
+ .cardStyle {
246
+ width: 260px !important;
247
+ height: 160px !important;
248
+ }
249
+ .detail {
250
+ margin-bottom: 5px;
251
+ font-size: 0.6ch;
252
+ }
253
+ .Price {
254
+ font-size: 9px;
255
+ }
256
+ .locationText {
257
+ font-size: 6px;
258
+ }
259
+ .Vector {
260
+ width: 7px;
261
+ height: 10px;
262
+ margin: 0px 2px 4px;
263
+ }
264
+ .heartVector {
265
+ width: 15px;
266
+ height: 20px;
267
+ }
268
+ }