nestiq-component-library 1.1.166 → 1.1.168

package/src/components/NewPropertyCard/NewPropertyCard.css

@@ -1,14 +1,14 @@
 .property-card {
   width: 100%;
-  max-width: 1280px;
+  /* max-width: 1280px; */
   height: auto;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
   border-radius: 32px;
 
-  @media (min-width: 1500px) {
+  /* @media (min-width: 1500px) {
     max-width: 1280px;
     margin: 0 auto;
-  }
+  } */
 }
 
 .priceValue,
@@ -21,13 +21,38 @@
   white-space: nowrap;
 }
 
-.listing-compact {
-  max-width: 750px;
-  gap: 32px;
+.listing-compact_c {
+  /* max-width: 750px; */
+  gap: 8px;
+  padding: 24px;
   border-radius: 0 32px 32px 0;
   background-color: rgba(58, 58, 58, 0.068);
 }
 
+.wrapperCompanySec {
+  height: 119px;
+  align-self: stretch;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 16px;
+  border-radius: 16px;
+  border: solid 1px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+}
+
+.kontactbutton_cc {
+  width: 180px;
+  height: 43px;
+  gap: 10px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background: linear-gradient(to top, #000, #666);
+}
+
 .cc-height {
   height: 460px;
 }

package/src/components/NewPropertyCard/NewPropertyCard.tsx

@@ -40,6 +40,7 @@ interface PopupProps {
     selectedFloorPlan?: string;
     pictures: { contentUrl: string; pictureType: { id: number } }[];
   };
+  userData?: { firstname: string; lastname: string; company: string };
   Impliment: any;
   baseUrl: string;
   themesList: any;
@@ -193,102 +194,64 @@ export default function PropertyCard(props: PopupProps) {
         </div>
       </div>
       <div
-        className={`listing-compact d-flex align-self-end flex-column col-6 ${
+        className={`listing-compact_c justify-content-between d-flex flex-column col-6 ${
           props.Impliment ? "cc-height" : "listing-height"
         }`}
       >
-        <div
-          className="d-flex flex-column gap-3 mb-4 justify-content-between"
-          style={{ height: "104px" }}
-        >
-          <div className="d-flex flex-row justify-content-between gap-2">
-            <span
-              className="propertyTitle align-items-start "
-              style={{
-                paddingLeft: "32px",
-                paddingTop: "32px",
-              }}
-              onClick={props.onClick}
-              role="button"
-            >
-              {props.property.expose?.title}
-              {/*Einziehen ohne einen Pinselstrich - Kernsanierte Eigentumswohnung*/}
-              {/*in top Lage*/}
-            </span>
-            <div
-              className="d-flex  gap-2"
-              style={{
-                paddingRight: "32px",
-                paddingTop: "21px",
-                paddingLeft: "10px",
-              }}
-            >
-              <img
-                src={shareIcon}
-                alt="Share Icon"
-                className=" "
-                onClick={handleSharePopUp}
-                style={{ maxHeight: "24px", maxWidth: "24px" }}
-                role="button"
-              />
-              <img
-                src={moreIcon}
-                alt="More Icon"
-                className=""
-                style={{ maxHeight: "24px", maxWidth: "24px" }}
-                role="button"
-              />
-            </div>
-          </div>
-
-          <div
-            style={{
-              paddingLeft: "32px",
-              paddingRight: "32px",
-            }}
-          >
-            {" "}
-            <div className="location-wrapper">
-              <img
-                src={locationIcon}
-                alt="Location Icon"
-                className="location-icon"
-              />
-              <span className="locationTexts ">
-                {props.property.city || "N/A"}
-              </span>
-            </div>
-          </div>
+        <div className="col-12 d-flex justify-content-end gap-2">
+          <img
+            src={shareIcon}
+            alt="Share Icon"
+            className=" "
+            onClick={handleSharePopUp}
+            style={{ maxHeight: "24px", maxWidth: "24px" }}
+            role="button"
+          />
+          <img
+            src={moreIcon}
+            alt="More Icon"
+            className=""
+            style={{ maxHeight: "24px", maxWidth: "24px" }}
+            role="button"
+          />
         </div>
-        <div
-          className="d-flex flex-row justify-content-between mt-3"
-          style={{
-            paddingLeft: "32px",
-            paddingRight: "32px",
-          }}
-        >
+        <div className="col-11">
           <span
-            className="priceValue col-lg-5 col-md-5 col-sm-6"
-            style={{ whiteSpace: "nowrap" }}
+            className="propertyTitle align-items-start "
+            onClick={props.onClick}
+            role="button"
           >
+            {props.property.expose?.title}
+            {/*Einziehen ohne einen Pinselstrich - Kernsanierte Eigentumswohnung*/}
+            {/*in top Lage*/}
+          </span>
+        </div>
+        <div className="col-12">
+          <div className="location-wrapper">
+            <img
+              src={locationIcon}
+              alt="Location Icon"
+              className="location-icon"
+            />
+            <span className="locationTexts ">
+              {props.property.city || "N/A"}
+            </span>
+          </div>
+        </div>
+        <div className="d-flex flex-row justify-content-between">
+          <span className="priceValue justify-content-center align-items-center">
             {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
             <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"
-            style={{ whiteSpace: "nowrap" }}
-          >
+          <span className="text-dark value d-flex justify-content-center align-items-center">
             {props.property.constructedArea} m²
             <div className="details" style={{ whiteSpace: "nowrap" }}>
               {t.wohnflache}
             </div>
           </span>
-          <span
-            className="text-dark value text-center col-lg-2 col-md-2 col-sm-5 text-truncate"
-            style={{ whiteSpace: "nowrap" }}
-          >
+          <span className="text-dark value d-flex justify-content-center align-items-center">
             {+props.property?.rooms}
 
             <div
@@ -304,7 +267,7 @@ export default function PropertyCard(props: PopupProps) {
           </span> */}
         </div>
 
-        <div
+        {/* <div
           className="labelTopClass d-flex start-0 col-sm-5 col-lg-8 "
           style={{ padding: "0 28px" }}
         >
@@ -336,36 +299,41 @@ export default function PropertyCard(props: PopupProps) {
               </label>
             )}
           </div>
-        </div>
-        {props.Impliment && (
-          <div
-            className=""
-            style={{
-              paddingLeft: "32px",
-              paddingRight: "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="ms-2 d-flex flex-column col-8 justify-content-center align-self-center text-center">
-                <span className="fw-bold">Herr Florian Gauss</span>
-                <span>Immogart UGh</span>
-                {/* <button
-                  className="kontactbutton text-light align-self-center"
-                  onClick={handleMessagPopUp}
-                  role="button"
-                >
-                  <span className="kontact-button-text">
-                    Kontakt aufnehmen{" "}
-                  </span>
-                </button> */}
+        </div> */}
+        <div className="d-lex flex-column ">
+          <div className="wrapperCompanySec d-flex justify-content-around flex-row">
+            <div className="d-flex flex-column col-4 justify-content-between ">
+              <img src={immooly} alt="Logo" className="immooly" />
+            </div>
+            <div className="d-flex flex-column align-items-center justify-content-center">
+              <div className="d-flex flex-column text-center">
+                <span className="fw-bold">
+                  {props.userData
+                    ? `${props.userData.firstname} ${props.userData.lastname}`
+                    : "Firstname Lastname"}
+                </span>
+                <span className="fst-italic fw-normal">
+                  {props.userData?.company
+                    ? props.userData.company
+                    : "Your Company"}
+                </span>
               </div>
+              {/* {props.userData && (
+                  <button
+                    className="kontactbutton_cc text-light "
+                    // onClick={handleMessagPopUp}
+                    role="button"
+                  >
+                    <span className="kontact-button-text">
+                      Kontakt aufnehmen{" "}
+                    </span>
+                  </button>
+                )} */}
             </div>
           </div>
-        )}
-        {!props.Impliment && (
+        </div>
+
+        {/* {!props.Impliment && (
           <div
             className="d-lex flex-column "
             style={{
@@ -394,7 +362,7 @@ export default function PropertyCard(props: PopupProps) {
               </div>
             </div>
           </div>
-        )}
+        )} */}
       </div>
       {/* {floorPlan && (
         <FloorPlanPopup