nestiq-component-library 1.1.0 → 1.1.2

package/src/components/PropertyCard/PropertyCard.tsx

@@ -1,136 +1,136 @@
-import React, { useState } from "react";
-// import { FormattedMessage } from "react-intl";
-import layerIcon from "../../assets/images/LayersIcon.svg";
-import heart from "../../assets/images/heart.svg";
-import locationIcon from "../../assets/images/locationIcon.svg";
-import "../PropertyCard/PropertyCard.css";
-import noImageIcon from "../../assets/images/default-property.jpg";
-import { formatPrice } from "../../functions/util";
-
-interface PopupProps {
-  property: {
-    city: string;
-    historicalProtection: boolean;
-    basement: boolean;
-    balcony: boolean;
-    terrace: boolean;
-    guestBathroom: boolean;
-    bathrooms: string;
-    usableArea: string;
-    id: string;
-    rooms: string;
-    evaluation?: {
-      askingPrice: number;
-    };
-    pictures: { contentUrl: string }[];
-  };
-  onClick: any;
-  baseUrl: string;
-}
-
-export default function PropertyCard(props: PopupProps) {
-  const [liked, setLiked] = useState(false);
-
-  const handleLike = () => {
-    setLiked(!liked);
-  };
-  const pictureUrl =
-    props.property.pictures && props.property.pictures.length > 0
-      ? `${props.baseUrl}${props.property.pictures[0].contentUrl}`
-      : noImageIcon;
-  return (
-    <div
-      key={props.property.id}
-      className="card-body me-4 mb-4 position-relative cardStyle"
-      style={{
-        backgroundImage: `url(${pictureUrl})`,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-      }}
-      onClick={props.onClick}
-      role="button"
-    >
-      <div className="labelTopClass position-absolute top-0 start-0 col-sm-5 col-lg-8">
-        <div className="d-flex align-items-center ms-2 mb-1 mt-2 gap-2">
-          <label className="p-1 firstLabel d-flex flex-row justify-content-center align-items-center">
-            <img src={layerIcon} alt="Location Icon" className="layersVector" />
-            <span className="layersText">{"Grundriss"}</span>
-          </label>
-          {props.property.historicalProtection && (
-            <label className="thirdLabels d-flex flex-row justify-content-center align-items-center">
-              <span className="layersText p-1">{"Denkmalschutz"}</span>
-            </label>
-          )}
-
-          {props.property.basement && (
-            <label className="secondLabel  d-flex flex-row justify-content-center align-items-center">
-              <span className="layersText p-1">{"Keller"}</span>
-            </label>
-          )}
-        </div>
-        <div className="d-flex align-items-center  ms-2 start-0 gap-2">
-          {props.property.terrace && (
-            <label className="p-1 thirdLabels d-flex flex-row justify-content-center align-items-center ">
-              <span className="layersText">{"Terrace"}</span>
-            </label>
-          )}
-          {props.property.balcony && (
-            <label className="secondLabel  d-flex flex-row justify-content-center align-items-center">
-              <span className="layersText p-1">{"Balkon"}</span>
-            </label>
-          )}
-
-          {props.property.guestBathroom && (
-            <label className="col-1 fourthLabels d-flex flex-row justify-content-center align-items-center ">
-              <span className="layersText p-1">{"Gäste-WC"}</span>
-            </label>
-          )}
-        </div>
-      </div>
-      <div className="d-flex align-items-center  position-absolute top-0 end-0 p-3">
-        {/*<img*/}
-        {/*  src={heart}*/}
-        {/*  alt=" Heart Icon"*/}
-        {/*  className={`heartVector ${liked ? "liked" : ""}`}*/}
-        {/*  onClick={handleLike}*/}
-        {/*/>*/}
-      </div>
-      <div className="d-flex align-items-center mb-3 position-absolute bottom-0 start-0  p-2">
-        <span className="Price col-lg-12 col-md-12 col-sm-12 text-truncate p-1">
-          {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
-        </span>
-      </div>
-      <div className="d-flex w-50 align-items-center position-absolute bottom-0 start-0 p-2">
-        <img src={locationIcon} alt="Location Icon" className="Vector" />
-        <span className="locationText text-truncate">
-          {props.property.city || "N/A"}
-        </span>
-      </div>
-      <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">
-        <span className="detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end ">
-          {+props.property.rooms}
-          <br />
-          {/* <FormattedMessage id="ROOMS" /> */}
-          <span>Zimmer</span>
-        </span>
-        <span className="detail col-lg-3 col-md-3 col-sm-4 text-truncate ">
-          {+props.property.bathrooms}
-          <br />
-          {/* <FormattedMessage
-            id="BATHROOM"
-            values={{ itemCount: +props.property.bathrooms }}
-          /> */}
-          {/* {+props.property.bathrooms} */}
-
-          <span>Bäd</span>
-        </span>
-        <span className="detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3">
-          {props.property.usableArea} m²
-          <br />
-          {/* <FormattedMessage id="LIVING_SPACE" /> */}
-          <span>Wohnfläche</span>
-        </span>
-      </div>
-    </div>
-  );
-}
+import React, { useState } from "react";
+// import { FormattedMessage } from "react-intl";
+import layerIcon from "../../assets/images/LayersIcon.svg";
+import heart from "../../assets/images/heart.svg";
+import locationIcon from "../../assets/images/locationIcon.svg";
+import "../PropertyCard/PropertyCard.css";
+import noImageIcon from "../../assets/images/default-property.jpg";
+import { formatPrice } from "../../functions/util";
+
+interface PopupProps {
+  property: {
+    city: string;
+    historicalProtection: boolean;
+    basement: boolean;
+    balcony: boolean;
+    terrace: boolean;
+    guestBathroom: boolean;
+    bathrooms: string;
+    usableArea: string;
+    id: string;
+    rooms: string;
+    evaluation?: {
+      askingPrice: number;
+    };
+    pictures: { contentUrl: string }[];
+  };
+  onClick: any;
+  baseUrl: string;
+}
+
+export default function PropertyCard(props: PopupProps) {
+  const [liked, setLiked] = useState(false);
+
+  const handleLike = () => {
+    setLiked(!liked);
+  };
+  const pictureUrl =
+    props.property.pictures && props.property.pictures.length > 0
+      ? `${props.baseUrl}${props.property.pictures[0].contentUrl}`
+      : noImageIcon;
+  return (
+    <div
+      key={props.property.id}
+      className="card-body me-4 mb-4 position-relative cardStyle"
+      style={{
+        backgroundImage: `url(${pictureUrl})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+      onClick={props.onClick}
+      role="button"
+    >
+      <div className="labelTopClass position-absolute top-0 start-0 col-sm-5 col-lg-8">
+        <div className="d-flex align-items-center ms-2 mb-1 mt-2 gap-2">
+          <label className="p-1 firstLabel d-flex flex-row justify-content-center align-items-center">
+            <img src={layerIcon} alt="Location Icon" className="layersVector" />
+            <span className="layersText">{"Grundriss"}</span>
+          </label>
+          {props.property.historicalProtection && (
+            <label className="thirdLabels d-flex flex-row justify-content-center align-items-center">
+              <span className="layersText p-1">{"Denkmalschutz"}</span>
+            </label>
+          )}
+
+          {props.property.basement && (
+            <label className="secondLabel  d-flex flex-row justify-content-center align-items-center">
+              <span className="layersText p-1">{"Keller"}</span>
+            </label>
+          )}
+        </div>
+        <div className="d-flex align-items-center  ms-2 start-0 gap-2">
+          {props.property.terrace && (
+            <label className="p-1 thirdLabels d-flex flex-row justify-content-center align-items-center ">
+              <span className="layersText">{"Terrace"}</span>
+            </label>
+          )}
+          {props.property.balcony && (
+            <label className="secondLabel  d-flex flex-row justify-content-center align-items-center">
+              <span className="layersText p-1">{"Balkon"}</span>
+            </label>
+          )}
+
+          {props.property.guestBathroom && (
+            <label className="col-1 fourthLabels d-flex flex-row justify-content-center align-items-center ">
+              <span className="layersText p-1">{"Gäste-WC"}</span>
+            </label>
+          )}
+        </div>
+      </div>
+      <div className="d-flex align-items-center  position-absolute top-0 end-0 p-3">
+        {/*<img*/}
+        {/*  src={heart}*/}
+        {/*  alt=" Heart Icon"*/}
+        {/*  className={`heartVector ${liked ? "liked" : ""}`}*/}
+        {/*  onClick={handleLike}*/}
+        {/*/>*/}
+      </div>
+      <div className="d-flex align-items-center mb-3 position-absolute bottom-0 start-0  p-2">
+        <span className="Price col-lg-12 col-md-12 col-sm-12 text-truncate p-1">
+          {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
+        </span>
+      </div>
+      <div className="d-flex w-50 align-items-center position-absolute bottom-0 start-0 p-2">
+        <img src={locationIcon} alt="Location Icon" className="Vector" />
+        <span className="locationText text-truncate">
+          {props.property.city || "N/A"}
+        </span>
+      </div>
+      <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">
+        <span className="detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end ">
+          {+props.property.rooms}
+          <br />
+          {/* <FormattedMessage id="ROOMS" /> */}
+          <span>Zimmer</span>
+        </span>
+        <span className="detail col-lg-3 col-md-3 col-sm-4 text-truncate ">
+          {+props.property.bathrooms}
+          <br />
+          {/* <FormattedMessage
+            id="BATHROOM"
+            values={{ itemCount: +props.property.bathrooms }}
+          /> */}
+          {/* {+props.property.bathrooms} */}
+
+          <span>Bad</span>
+        </span>
+        <span className="detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3">
+          {props.property.usableArea} m²
+          <br />
+          {/* <FormattedMessage id="LIVING_SPACE" /> */}
+          <span>Wohnfläche</span>
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx

@@ -1,80 +1,82 @@
-import React, { useState } from "react";
-// import { FormattedMessage } from "react-intl";
-import ShareIcon from "../../assets/images/icon_share_1.svg";
-import locationIcon from "../../assets/images/locationIconBlack.svg";
-import "./PropertyDetailsHeader.css";
-import SharePopup from "../SharePopup/SharePopup";
-
-export interface PopupProps {
-  property: {
-    city: string;
-    constructedArea: string;
-    rooms: string;
-    propertyArea: string;
-    askingPrice: string;
-  };
-  title: string;
-}
-
-export default function PropertyDetailsHeader(props: PopupProps) {
-  const [showPopUp, setShowPopUp] = useState(false);
-
-  const handlePopUp = () => {
-    setShowPopUp(!showPopUp);
-  };
-
-  return (
-    <div className="Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 ">
-      <div className="header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 ">
-        <strong>{props.title ?? "-"}</strong>
-      </div>
-      <div className="header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4">
-        <img src={locationIcon} className="vector me-2" alt="location Icon" />
-
-        <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
-          {props.property.city}
-        </div>
-      </div>
-      <div className="d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4">
-        {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
-        <img
-          src={ShareIcon}
-          alt="share icon"
-          className="v_share me-3"
-          onClick={handlePopUp}
-        />
-      </div>
-      <div className="fetch_section d-flex align-items-center flex-row col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0">
-        {props && (
-          <div className=" propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center  ">
-            {props.property.askingPrice} <br />
-            Kaufpreis
-          </div>
-        )}
-        {props && (
-          <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
-            {props.property.constructedArea} m² <br />
-            Wohnfläche
-            {/* <FormattedMessage id="LIVING_SPACE" /> */}
-          </div>
-        )}
-        {props && (
-          <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
-            {props.property.rooms} <br />
-            Zimmer
-            {/* <FormattedMessage id="ROOMS" /> */}
-          </div>
-        )}
-        {props && (
-          <div className="propText  col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
-            {props.property.propertyArea} m²
-            <br />
-            Grundstück
-            {/* <FormattedMessage id="Grundstück" /> */}
-          </div>
-        )}
-      </div>
-      {showPopUp && <SharePopup />}
-    </div>
-  );
-}
+import React, { useState } from "react";
+// import { FormattedMessage } from "react-intl";
+import ShareIcon from "../../assets/images/icon_share_1.svg";
+import locationIcon from "../../assets/images/locationIconBlack.svg";
+import "./PropertyDetailsHeader.css";
+import SharePopup from "../SharePopup/SharePopup";
+import { formatPrice } from "../../functions/util";
+
+export interface PopupProps {
+  property: {
+    city: string;
+    constructedArea: string;
+    rooms: string;
+    propertyArea: number;
+    askingPrice: number;
+  };
+  title: string;
+}
+
+export default function PropertyDetailsHeader(props: PopupProps) {
+  const [showPopUp, setShowPopUp] = useState(false);
+
+  const handlePopUp = () => {
+    setShowPopUp(!showPopUp);
+  };
+
+  return (
+    <div className="Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 ">
+      <div className="header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 ">
+        <strong>{props.title ?? "-"}</strong>
+      </div>
+      <div className="header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4">
+        <img src={locationIcon} className="vector me-2" alt="location Icon" />
+
+        <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
+          {props.property.city}
+        </div>
+      </div>
+      <div className="d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4">
+        {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
+        <img
+          src={ShareIcon}
+          alt="share icon"
+          className="v_share me-3"
+          onClick={handlePopUp}
+        />
+      </div>
+      <div className="fetch_section d-flex align-items-center flex-row col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0">
+        {props && (
+          <div className=" propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center  ">
+            {formatPrice(props.property?.askingPrice ?? 0)}
+            <br />
+            Kaufpreis
+          </div>
+        )}
+        {props && (
+          <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
+            {props.property.constructedArea} m² <br />
+            Wohnfläche
+            {/* <FormattedMessage id="LIVING_SPACE" /> */}
+          </div>
+        )}
+        {props && (
+          <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
+            {props.property.rooms} <br />
+            Zimmer
+            {/* <FormattedMessage id="ROOMS" /> */}
+          </div>
+        )}
+        {props && (
+          <div className="propText  col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
+            {formatPrice(props.property.propertyArea)} m²
+            <br />
+            Grundstück
+            {/* <FormattedMessage id="Grundstück" /> */}
+          </div>
+        )}
+      </div>
+      {showPopUp && <SharePopup />}
+    </div>
+  );
+}