nestiq-component-library 1.1.164 → 1.1.166

package/src/components/NewPropertyCard/NewPropertyCard.css

@@ -1,6 +1,7 @@
 .property-card {
   width: 100%;
   max-width: 1280px;
+  height: auto;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
   border-radius: 32px;
 
@@ -10,6 +11,16 @@
   }
 }
 
+.priceValue,
+.value {
+  white-space: nowrap;
+}
+
+.price_label,
+.details {
+  white-space: nowrap;
+}
+
 .listing-compact {
   max-width: 750px;
   gap: 32px;
@@ -90,7 +101,6 @@
 }
 .kontact-button-text {
   flex-grow: 0;
-  font-family: Inter;
   font-size: 16px;
   font-weight: 500;
   font-stretch: normal;
@@ -212,7 +222,6 @@
 
 .details {
   font-size: 16px;
-  text-align: center;
   color: #344041;
 }
 
@@ -224,7 +233,6 @@
 
 .value {
   font-size: 20px;
-  text-align: center;
   font-weight: 500;
   display: flex;
   flex-direction: column;

package/src/components/NewPropertyCard/NewPropertyCard.tsx

@@ -49,6 +49,12 @@ interface PopupProps {
   onclickSuccess: () => void;
   onClick: () => void;
   onFloorPlanClick: (images: { url: string; title: string }[]) => void;
+  translations?: {
+    kaufpreis?: string;
+    wohnflache?: string;
+    zimmer?: string;
+    grundriss?: string;
+  };
 }
 export default function PropertyCard(props: PopupProps) {
   const [liked, setLiked] = useState(false);
@@ -129,6 +135,13 @@ export default function PropertyCard(props: PopupProps) {
   };
   // const boosted = "true";
 
+  const t = {
+    kaufpreis: props.translations?.kaufpreis || "Kaufpreis",
+    wohnflache: props.translations?.wohnflache || "Wohnfläche",
+    zimmer: props.translations?.zimmer || "Zimmer",
+    grundriss: props.translations?.grundriss || "Grundriss",
+  };
+
   return (
     <div className="d-flex flex-row property-card">
       <div className="d-flex flex-column col-md-6 col-lg-6">
@@ -174,7 +187,7 @@ export default function PropertyCard(props: PopupProps) {
               style={{ marginBottom: "16px" }}
             >
               <img src={iconLayers} className="" style={{ width: "18px" }} />{" "}
-              Grundriss
+              {t.grundriss}
             </div>
           </div>
         </div>
@@ -248,29 +261,49 @@ export default function PropertyCard(props: PopupProps) {
           </div>
         </div>
         <div
-          className="d-flex  flex-row gap-3 col-6 col-lg-8 justify-content-between mt-3"
+          className="d-flex flex-row justify-content-between mt-3"
           style={{
             paddingLeft: "32px",
             paddingRight: "32px",
           }}
         >
-          <span className="priceValue col-lg-5 col-md-5 col-sm-6  ">
+          <span
+            className="priceValue col-lg-5 col-md-5 col-sm-6"
+            style={{ whiteSpace: "nowrap" }}
+          >
             {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
-            <div className="price_label">Kaufpreis</div>
+            <div className="price_label" style={{ whiteSpace: "nowrap" }}>
+              {t.kaufpreis}
+            </div>
           </span>
-          <span className="text-dark value col-lg-5 col-md-5 col-sm-7">
+          <span
+            className="text-dark value col-lg-5 col-md-5 col-sm-7"
+            style={{ whiteSpace: "nowrap" }}
+          >
             {props.property.constructedArea} m²
-            <div className="details">Wohnfläche</div>
+            <div className="details" style={{ whiteSpace: "nowrap" }}>
+              {t.wohnflache}
+            </div>
           </span>
-          <span className="text-dark value col-lg-3 col-md-3 col-sm-6 text-truncate  ">
+          <span
+            className="text-dark value text-center col-lg-2 col-md-2 col-sm-5 text-truncate"
+            style={{ whiteSpace: "nowrap" }}
+          >
             {+props.property?.rooms}
-            <div className="details">Zimmer</div>
+
+            <div
+              className="details text-center"
+              style={{ whiteSpace: "nowrap" }}
+            >
+              {t.zimmer}
+            </div>
           </span>
           {/* <span className="text-dark value col-lg-4 col-md-3 col-sm-4 text-truncate ">
             {+props.property.propertyArea} m²
             <div className="details">Grundstück</div>
           </span> */}
         </div>
+
         <div
           className="labelTopClass d-flex start-0 col-sm-5 col-lg-8 "
           style={{ padding: "0 28px" }}

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.css

@@ -1,9 +1,9 @@
-.compact {
+.compact_cc {
+  padding: 32px;
   height: 194px;
   border-radius: 32px;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
   background-color: #f2f2f2;
-  position: relative !important;
 }
 
 .header_Text {
@@ -12,7 +12,7 @@
   line-height: normal;
   color: #1b1b1b;
 }
-.location{
+.location {
   left: 0;
 }
 .vector svg {
@@ -24,8 +24,11 @@
   cursor: pointer;
 }
 
+.textWrapper {
+  height: 20px;
+}
+
 .propText {
-  height: 30px;
   font-size: 16px;
   letter-spacing: normal;
   text-align: center;
@@ -51,44 +54,41 @@
     height: 700px;
   }
   .compact {
-  border-radius: 32px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: #f2f2f2;
-}
-.compact2{
-  position: relative !important;
-  display: flex !important;
-  align-self: flex-start !important;
-  margin-left: 25px;
-  justify-content: start !important;
-  align-items: flex-start !important;
-
-}
-.compact3{
-  position: relative !important;
-  display: flex !important;
-  margin-left: 30px;
-  margin-top: 10px !important;
-}
-.header_Text {
-  margin-top: 0px;
-  
-}
-.fetch_section {
-  margin-top: 0px;
-  height: 60px;
-}
-.propText {
-  justify-content: start !important;
-  align-self: flex-start !important;
-  text-align: start !important;
-
-}
-.propText2 {
-  justify-content: start !important;
-  align-self: flex-start !important;
-  text-align: start !important;
-  font-weight: 1000;
-  font-size: 24px;
-}
+    border-radius: 32px;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+    background-color: #f2f2f2;
+  }
+  .compact2 {
+    position: relative !important;
+    display: flex !important;
+    align-self: flex-start !important;
+    margin-left: 25px;
+    justify-content: start !important;
+    align-items: flex-start !important;
+  }
+  .compact3 {
+    position: relative !important;
+    display: flex !important;
+    margin-left: 30px;
+    margin-top: 10px !important;
+  }
+  .header_Text {
+    margin-top: 0px;
+  }
+  .fetch_section {
+    margin-top: 0px;
+    height: 60px;
+  }
+  .propText {
+    justify-content: start !important;
+    align-self: flex-start !important;
+    text-align: start !important;
+  }
+  .propText2 {
+    justify-content: start !important;
+    align-self: flex-start !important;
+    text-align: start !important;
+    font-weight: 1000;
+    font-size: 24px;
+  }
 }

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx

@@ -8,6 +8,7 @@ import { formatPrice, formatPropertyArea } from "../../functions/util";
 
 export interface PopupProps {
   property: {
+    fullAddress: string;
     city: string;
     constructedArea: string;
     rooms: string;
@@ -15,73 +16,91 @@ export interface PopupProps {
     askingPrice: number;
   };
   title: string;
+  translations?: {
+    kaufpreis?: string;
+    wohnflache?: string;
+    zimmer?: string;
+    grundriss?: string;
+  };
 }
 
 export default function PropertyDetailsHeader(props: PopupProps) {
   const [showPopUp, setShowPopUp] = useState(false);
   const area = props.property?.propertyArea;
-  
-    const handleOpenPopup = () => setShowPopUp(true);
 
-    const handleClosePopup = () => setShowPopUp(false);
+  const handleOpenPopup = () => setShowPopUp(true);
+
+  const handleClosePopup = () => setShowPopUp(false);
+
+  const t = {
+    kaufpreis: props.translations?.kaufpreis || "Kaufpreis",
+    wohnflache: props.translations?.wohnflache || "Wohnfläche",
+    zimmer: props.translations?.zimmer || "Zimmer",
+    grundriss: props.translations?.grundriss || "Grundriss",
+  };
+
+  return (
+    <div className="compact_cc d-flex flex-column col-12 col-lg-12 mt-3 justify-content-between">
+      <div className="col-12 d-flex flex-row">
+        <div className="header_Text d-flex col-lg-11 col-md-11 mt-0">
+          <strong>{props.title ?? "-"}</strong>
+        </div>
+        <div className="d-flex col-lg-1 col-md-1 justify-content-end position-relative">
+          {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
+          <img
+            src={ShareIcon}
+            alt="share icon"
+            className="v_share me-3 position-absolute"
+            onClick={handleOpenPopup}
+          />
+        </div>
+      </div>
 
-   return (
-     <div className="Pheader compact d-flex flex-column flex-md-row d-flex col-12 col-lg-12 mt-5 ">
-       <div className="header_Text d-flex col-5 col-lg-7 col-md-9 mt-4 ms-4 ">
-         <strong>{props.title ?? "-"}</strong>
-       </div>
-       <div className="compact3 position-absolute header_Text text-truncate col-5 col-lg-5 col-md-5 d-flex flex-row 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="compact2 d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 me-2 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={handleOpenPopup}
-         />
-       </div>
-       <div className="compact2 gap-3 gap-md-0 fetch_section d-flex align-items-center flex-column flex-md-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 flex-column align-items-md-center justify-content-center mt-4 mt-md-0">
-             <span className="propText2">
-               {formatPrice(props.property?.askingPrice ?? 0)}€
-             </span>
-             <span>Kaufpreis</span>
-           </div>
-         )}
+      <div className="d-flex flex-row justify-content-between">
+        <div className="col-6 d-flex flex-row align-items-end jsutify-content-start gap-1">
+          <div className="d-flex gap-1 justify-content-center">
+            <div className="d-flex gap-2 align-items-center">
+              <img src={locationIcon} className="" alt="location Icon" />
+            </div>
+            <div className="textWrapper">{props.property?.fullAddress}</div>
+          </div>
+        </div>
+        <div className="d-flex align-items-end gap-3 justify-content-end flex-row col-lg-6 col-md-6 col-sm-5">
+          {props && (
+            <div className="propText h-100 d-flex flex-column align-items-center justify-content-center">
+              <span className="">
+                {formatPrice(props.property?.askingPrice ?? 0)}€ <br />
+              </span>
+              <span className="textWrapper">{t.kaufpreis}</span>
+            </div>
+          )}
 
-         {props && (
-           <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-md-center justify-content-center flex-column">
-             <span className="propText2">
-               {formatPropertyArea(props.property.constructedArea) ?? 0}
-             </span>
-             <span>Wohnfläche</span>
-             {/* <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 flex-column">
-             <span className="propText2">{props.property.rooms}</span>
-             <span>Zimmer</span>
-             {/* <FormattedMessage id="ROOMS" /> */}
-           </div>
-         )}
-         {props && (
-           <div className="propText  col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column">
-             <span className="propText2">
-               {formatPropertyArea(area ?? 0)} m²
-             </span>
-             Grundstück
-             {/* <FormattedMessage id="Grundstück" /> */}
-           </div>
-         )}
-       </div>
-       {showPopUp && <SharePopup onClick={() => handleClosePopup()} />  }
-     </div>
-   );
+          {props && (
+            <div className="propText h-100 d-flex flex-column align-items-center justify-content-center">
+              <span className="">
+                {formatPropertyArea(props.property.constructedArea) ?? 0}
+              </span>
+              <span className="textWrapper">{t.wohnflache}</span>
+            </div>
+          )}
+          {props && (
+            <div className="propText h-100 d-flex flex-column align-items-center justify-content-center">
+              <span className="">{props.property.rooms}</span>
+              <span className="textWrapper">{t.zimmer}</span>
+            </div>
+          )}
+          {/* {props && (
+          <div className="propText  col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column">
+            <span className="">
+              {formatPropertyArea(area ?? 0)} m²
+            </span>
+            Grundstück
+            <FormattedMessage id="Grundstück" />
+          </div>
+        )} */}
+        </div>
+      </div>
+      {showPopUp && <SharePopup onClick={() => handleClosePopup()} />}
+    </div>
+  );
 }