nestiq-component-library 1.1.163 → 1.1.165

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>
@@ -235,7 +248,7 @@ export default function PropertyCard(props: PopupProps) {
             }}
           >
             {" "}
-            <div className="location-wrapper mb-1">
+            <div className="location-wrapper">
               <img
                 src={locationIcon}
                 alt="Location Icon"
@@ -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  "
+          className="d-flex flex-row justify-content-between mt-3"
           style={{
             paddingLeft: "32px",
             paddingRight: "32px",
           }}
         >
-          <span className="priceValue col-lg-4 col-md-4 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-4 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 ">
+          {/* <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>
+          </span> */}
         </div>
+
         <div
           className="labelTopClass d-flex start-0 col-sm-5 col-lg-8 "
           style={{ padding: "0 28px" }}