nestiq-component-library 1.1.98 → 1.1.100

package/src/components/NewPropertyCard/NewPropertyCard.tsx

@@ -61,7 +61,7 @@ export default function PropertyCard(props: PopupProps) {
   const pictureUrls =
     props.property?.pictures?.length > 0
       ? props.property.pictures.map(
-          (picture) => `${props.baseUrl}${picture.contentUrl}`,
+          (picture) => `${props.baseUrl}${picture.contentUrl}`
         )
       : [noImageIcon];
 
@@ -109,7 +109,10 @@ export default function PropertyCard(props: PopupProps) {
 
   return (
     <div className="d-flex flex-row property-card">
-      <div className="d-flex flex-column col-md-6" onClick={props.onClick}>
+      <div
+        className="d-flex flex-column col-md-6 col-lg-6"
+        onClick={props.onClick}
+      >
         <div
           key={props.property.id}
           className="card-bod position-relative cardStyles h-100 w-100"
@@ -117,12 +120,13 @@ export default function PropertyCard(props: PopupProps) {
             backgroundImage: `url(${mainImage || pictureUrls[0]})`,
             backgroundSize: "cover",
             backgroundPosition: "center",
+            maxWidth: "640",
           }}
         >
           <div className="d-flex flex-row justify-content-between gap-5">
             <div
               className="d-flex ms-2"
-              style={{ position: "absolute", left: "0" }}
+              style={{ position: "absolute", marginLeft: "16px" }}
               onClick={() => handleArrowClickInMainImage("left")}
               role="button"
             >
@@ -136,7 +140,7 @@ export default function PropertyCard(props: PopupProps) {
             >
               <img
                 src={arrowRight}
-                style={{ position: "absolute", right: "5px" }}
+                style={{ position: "absolute", right: "16px" }}
               />
             </div>
           </div>
@@ -158,22 +162,41 @@ export default function PropertyCard(props: PopupProps) {
           </div>
         </div>
       </div>
-      <div className="d-flex flex-column listing-compacts col-md-6">
-        <div className="d-flex align-self-end justify-content-end gap-2">
-          <img
-            src={shareIcon}
-            alt="Location Icon"
-            className="w-50 "
-            onClick={handleSharePopUp}
-          />
-          <img src={moreIcon} alt="Location Icon" className="" />
-        </div>
-        <div>
-          <span className="propertyTitle align-items-start ">
+      <div className="d-flex flex-column listing-compact col-6">
+        <div className="d-flex flex-row justify-content-between gap-2">
+          <span
+            className="propertyTitle align-items-start "
+            style={{
+              paddingLeft: "32px",
+              paddingTop: "32px",
+            }}
+          >
             {props.property.expose?.title}
           </span>
+          <div
+            className="d-flex  gap-2"
+            style={{
+              paddingRight: "32px",
+              paddingTop: "21px",
+              paddingLeft: "76px",
+            }}
+          >
+            <img
+              src={shareIcon}
+              alt="Location Icon"
+              className=" "
+              onClick={handleSharePopUp}
+              style={{ maxHeight: "24px", maxWidth: "24px" }}
+            />
+            <img
+              src={moreIcon}
+              alt="Location Icon"
+              className=""
+              style={{ maxHeight: "24px", maxWidth: "24px" }}
+            />
+          </div>
         </div>
-        <div>
+        <div style={{ paddingLeft: "32px", paddingRight: "32px" }}>
           {" "}
           <div className="d-flex ">
             <img src={locationIcon} alt="Location Icon" className="Vector" />
@@ -182,8 +205,11 @@ export default function PropertyCard(props: PopupProps) {
             </span>
           </div>
         </div>
-        <div className="d-flex  flex-row gap-3 col-6 col-lg-8 justify-content-between  ">
-          <span className="value col-lg-3 col-md-4 col-sm-6  ">
+        <div
+          className="d-flex  flex-row gap-3 col-6 col-lg-8 justify-content-between  "
+          style={{ paddingLeft: "32px", paddingRight: "32px" }}
+        >
+          <span className="value col-lg-4 col-md-4 col-sm-6  ">
             {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
             <br />
             <span className="details">Kaufpreis</span>
@@ -203,7 +229,7 @@ export default function PropertyCard(props: PopupProps) {
               <span>Bad</span>
             </span>
           </span>
-          <span className="text-dark value col-lg-4 col-md-5 col-sm-7  ">
+          <span className="text-dark value col-lg-5 col-md-5 col-sm-7  ">
             {props.property.usableArea} m²
             <br />
             <span className="details">
@@ -211,7 +237,10 @@ export default function PropertyCard(props: PopupProps) {
             </span>
           </span>
         </div>
-        <div className="labelTopClass d-flex top-0 start-0 col-sm-5 col-lg-8 ">
+        <div
+          className="labelTopClass d-flex top-0 start-0 col-sm-5 col-lg-8 "
+          style={{ paddingLeft: "32px", paddingRight: "32px" }}
+        >
           <div className=" align-items-center d-flex flex-row  gap-3">
             {props.property.historicalProtection && (
               <label className="thirdLabels justify-content-center align-items-center">
@@ -241,21 +270,30 @@ export default function PropertyCard(props: PopupProps) {
             )}
           </div>
         </div>
-        <div className="Frame-136 d-flex flex-row">
-          <div className="d-flex flex-column flex-lg-row col-4 justify-content-between ">
-            <img src={immooly} alt="Logo" className="immooly" />
-          </div>
-          <div className="d-flex flex-column flex-lg-row  justify-content-between">
-            <span className="d-flex col-5">
-              Herr Florian Gauss Immogart UGh
-            </span>
-            <button
-              className="kontactbutton text-light "
-              onClick={handleMessagPopUp}
-              role="button"
-            >
-              <span className="kontact-button-text">Kontakt aufnehmen </span>
-            </button>
+        <div
+          className=""
+          style={{
+            paddingLeft: "32px",
+            paddingRight: "32px",
+            paddingTop: "32px",
+          }}
+        >
+          <div className="Frame-136 d-flex flex-row">
+            <div className="d-flex flex-column flex-lg-row col-4 justify-content-between ">
+              <img src={immooly} alt="Logo" className="immooly" />
+            </div>
+            <div className="d-flex flex-column flex-lg-row  justify-content-between">
+              <span className="d-flex col-5">
+                Herr Florian Gauss Immogart UGh
+              </span>
+              <button
+                className="kontactbutton text-light "
+                onClick={handleMessagPopUp}
+                role="button"
+              >
+                <span className="kontact-button-text">Kontakt aufnehmen </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>