nestiq-component-library 1.1.34 → 1.1.35

package/dist/components/NewPropertyCard/NewPropertyCard.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import "../PropertyCard/PropertyCard.css";
+interface PopupProps {
+    property: {
+        city: string;
+        historicalProtection: boolean;
+        basement: boolean;
+        balcony: boolean;
+        terrace: boolean;
+        guestBathroom: boolean;
+        bathrooms: string;
+        usableArea: string;
+        id: string;
+        rooms: string;
+        constructedArea: string;
+        evaluation?: {
+            askingPrice: number;
+        };
+        pictures: {
+            contentUrl: string;
+        }[];
+    };
+    onClick: any;
+    baseUrl: string;
+    title: string;
+}
+export default function PropertyCard(props: PopupProps): React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nestiq-component-library",
-  "version": "1.1.34",
+  "version": "1.1.35",
   "type": "module",
   "description": "",
   "main": "dist/index.js",

package/src/components/NewPropertyCard/NewPropertyCard.css

@@ -0,0 +1,368 @@
+.padding-global {
+  height: 737px !important;
+  padding: 0 40px;
+}
+.header {
+  font-size: 48px;
+  font-weight: 600;
+  color: #1b1b1b;
+}
+.listing-compacts {
+  align-self: stretch;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 32px;
+  border-radius: 0px 32px 32px 0px;
+  /* box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); */
+  background-color: rgba(58, 58, 58, 0.068);
+  height: 460px;
+}
+.cardStyles {
+  width: 410px;
+  max-width: 2405px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 460px;
+  border-radius: 32px 0px 0px 32px !important;
+}
+.cardTag {
+  width: 75px;
+  height: 30px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 6px;
+  padding: 0 24px;
+  border-radius: 16px;
+  border: solid 1px #313131;
+  background-color: #fff;
+}
+.Grundriss {
+  width: 120px;
+  height: 30px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background: linear-gradient(to top, #000, #666);
+}
+.Frame-136 {
+  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 {
+  width: 180px;
+  height: 43px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background: linear-gradient(to top, #000, #666);
+}
+.kontact-button-text {
+  flex-grow: 0;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: center;
+  color: #fff;
+}
+.propertyTitle {
+  display: flex;
+  flex-grow: 0;
+  font-family: Inter;
+  font-size: 24px;
+  font-weight: 580;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: start;
+  color: #313131;
+}
+.firstLabel {
+  width: 100px;
+  height: 25px;
+  gap: 6px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #031012 !important;
+  background-color: var(--main-yellow);
+}
+
+.secondLabel {
+  width: 85px;
+  height: 25px;
+  padding: 0 7px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #000;
+  background-color: #fff;
+}
+
+.thirdLabels {
+  width: 110px;
+  height: 25px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #000;
+  background-color: #fff;
+  display: flex;
+}
+
+.fourthLabels {
+  padding: 2px;
+
+  width: 100px;
+  height: 25px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #000;
+  background-color: #fff;
+}
+
+.layersVector {
+  width: 15.1px;
+  height: 16px;
+}
+
+.layersText {
+  font-size: 14px;
+  color: #1b1b1b;
+}
+
+.style-img {
+  object-fit: cover;
+  border-radius: 30px !important;
+}
+
+.Vector {
+  width: 12px;
+  height: 16.1px;
+  flex-grow: 0;
+  margin: 0.4px 6px 0.4px 0;
+}
+
+.customButton {
+  width: 262px;
+  height: 43px;
+  color: #000;
+  cursor: pointer;
+  border-color: #161410;
+  background-color: #181716;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+}
+.button_text {
+  font-size: 16px;
+  font-weight: 500;
+  color: #1b1b1b;
+}
+
+.heartVector {
+  width: 23px;
+  height: 26.7px;
+  cursor: pointer;
+}
+
+.heartVector.liked {
+  fill: rgb(255, 255, 255) !important;
+}
+.locationTexts {
+  font-size: 14px;
+  color: #344041;
+  text-align: center;
+}
+
+.arrowVector {
+  width: 23px;
+  height: 23px;
+  flex-grow: 0;
+  object-fit: contain;
+}
+
+.Price {
+  font-size: 26px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: center;
+  color: #ffffff;
+}
+
+.details {
+  font-size: 14px;
+  text-align: center;
+  color: #344041;
+}
+.value {
+  font-size: 20px;
+  text-align: center;
+  font-weight: 500;
+}
+
+.class {
+  background-color: #1b1b1b;
+}
+
+.header {
+  height: 64px;
+  justify-content: center;
+}
+
+.rightConer {
+  width: 200px;
+}
+@media all and (min-width: 2560px) {
+  .header {
+    font-size: 38px;
+
+    display: flex;
+  }
+  .cardStyle {
+    gap: 0px;
+    width: 350px;
+    height: 300px;
+    /* margin-left: 250px; */
+  }
+}
+@media (max-width: 1399px) {
+  .header {
+    font-size: 38px;
+    align-self: center;
+    margin-left: 150px;
+  }
+  .cardStyle {
+    gap: 0px;
+    width: 350px;
+    height: 300px;
+  }
+}
+
+@media (max-width: 1199px) {
+  .header {
+    font-size: 38px;
+  }
+  .cardStyle {
+    width: 300px;
+    height: 250px;
+  }
+}
+
+@media (max-width: 575px) {
+  .detail {
+    font-size: 11px;
+    padding: 2px;
+  }
+  .Price {
+    font-size: 19px;
+  }
+  .header {
+    font-size: 28px;
+  }
+  .locationText {
+    font-size: 12px;
+  }
+  .customButton {
+    width: 200px !important;
+  }
+  .button_text {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 375px) {
+  .labelTopClass {
+    width: 105px !important;
+  }
+  .layersText {
+    font-size: 9px;
+  }
+  .firstLabel {
+    gap: 2px;
+  }
+  .layersVector {
+    width: 9px;
+    height: 10px;
+    gap: 0px;
+  }
+  .cardStyle {
+    width: 320px !important;
+    height: 220px !important;
+  }
+  .header {
+    font-size: 24px;
+  }
+  .detail {
+    font-size: 10px;
+    padding: 2px;
+  }
+  .Price {
+    font-size: 18px;
+  }
+  .locationText {
+    font-size: 10px;
+  }
+  .Vector {
+    width: 8px;
+    height: 16px;
+    margin: 0px 2px 0.4px;
+  }
+}
+
+@media (max-width: 280px) {
+  .cardStyle {
+    width: 260px !important;
+    height: 160px !important;
+  }
+  .detail {
+    margin-bottom: 5px;
+    font-size: 0.6ch;
+  }
+  .Price {
+    font-size: 9px;
+  }
+  .locationText {
+    font-size: 6px;
+  }
+  .Vector {
+    width: 7px;
+    height: 10px;
+    margin: 0px 2px 4px;
+  }
+  .heartVector {
+    width: 15px;
+    height: 20px;
+  }
+}

package/src/components/NewPropertyCard/NewPropertyCard.tsx

@@ -0,0 +1,274 @@
+import React, { useRef, useState } from "react";
+// import { FormattedMessage } from "react-intl";
+import locationIcon from "../../../assets/Images/locationIcon.svg";
+import "../PropertyCard/PropertyCard.css";
+import noImageIcon from "../../../assets/Images/default-property.jpg";
+import { formatPrice } from "../../functions/util";
+import shareIcon from "../../../assets/Images/icon_share 1.svg";
+import moreIcon from "../../../assets/Images/more.svg";
+import arrowLeft from "../../../assets/Images/card-arrow-left.svg";
+import arrowRight from "../../../assets/Images/card-arrow-right.svg";
+import iconLayers from "../../../assets/Images/layer_icon.svg";
+import  FloorPlanPopup  from "../FloorPlanPopup/FloorPlanPopup";
+import MessagePopUp from "../Popup/Popup";
+import  SharePopup from "../SharePopup/SharePopup";
+
+
+interface PopupProps {
+  property: {
+    city: string;
+    historicalProtection: boolean;
+    basement: boolean;
+    balcony: boolean;
+    terrace: boolean;
+    guestBathroom: boolean;
+    bathrooms: string;
+    usableArea: string;
+    id: string;
+    rooms: string;
+    constructedArea: string;
+    evaluation?: {
+      askingPrice: number;
+    };
+    pictures: { contentUrl: string }[];
+  };
+  onClick: any;
+  baseUrl: string;
+  title: string;
+}
+export default function PropertyCard(props: PopupProps) {
+  const [liked, setLiked] = useState(false);
+  const [mainImage, setMainImage] = useState<string | null>(null);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const imageListRef = useRef<HTMLDivElement>(null);
+  const [floorPlan, setFloorPlan] = useState(false);
+  const [messagePopUp, setMessagPopUp] = useState(false);
+  const [sharePopUp, setSharePopUp] = useState(false);
+
+  const pictureUrls =
+    props.property?.pictures?.length > 0
+      ? props.property.pictures.map(
+          (picture) => `${props.baseUrl}${picture.contentUrl}`
+        )
+      : [noImageIcon];
+
+  // setPictureUrls(pictureUrls);
+  const handleLike = () => {
+    setLiked(!liked);
+  };
+  const floorPlanOnClick = () => {
+    setFloorPlan(true);
+  };
+  const handleMessagPopUp = () => {
+    setMessagPopUp(true);
+  };
+  const handleSharePopUp = () => {
+    setSharePopUp(true);
+  };
+  const handleClosePopup = () =>{
+    setFloorPlan(false);
+    setMessagPopUp(false);
+  }
+  const handleArrowClickInMainImage = (direction: string) => {
+    if (!props.property || pictureUrls.length === 0) return;
+
+    let newIndex = currentImageIndex;
+    if (direction === "left") {
+      newIndex =
+        (currentImageIndex - 1 + pictureUrls.length) % pictureUrls.length;
+    } else if (direction === "right") {
+      newIndex = (currentImageIndex + 1) % pictureUrls.length;
+    }
+
+    setCurrentImageIndex(newIndex);
+    setMainImage(pictureUrls[newIndex]);
+
+    // Ensure the ref exists before calling scrollTo
+    if (imageListRef.current) {
+      imageListRef.current.scrollTo({
+        left: newIndex * 150,
+        behavior: "smooth",
+      });
+    } else {
+      console.warn("imageListRef is not set");
+    }
+  };
+
+  return (
+    <div className="d-flex flex-row ">
+      <div className="d-flex flex-column">
+        <div
+          key={props.property.id}
+          className="card-body mb-4 position-relative cardStyles"
+          style={{
+            backgroundImage: `url(${mainImage || pictureUrls[0]})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        >
+          <div className="d-flex flex-row justify-content-between gap-5">
+            <div
+              className="d-flex"
+              style={{ position: "absolute", left: "0" }}
+              onClick={() => handleArrowClickInMainImage("left")}
+              role="button"
+            >
+              <img src={arrowLeft} />
+            </div>
+            <div></div>
+            <div
+              onClick={() => handleArrowClickInMainImage("right")}
+              role="button"
+            >
+              <img
+                src={arrowRight}
+                style={{ position: "absolute", right: "0" }}
+              />
+            </div>
+          </div>
+          <div
+            className="d-flex flex-row  align-self-end justify-item-start justify-content-between align-item-start gap-1 mb-2 ms-4"
+            style={{ position: "absolute", left: "0" }}
+          >
+            <div className="cardTag">{`${currentImageIndex + 1}/${
+              pictureUrls.length
+            }`}</div>
+            <div
+              className="Grundriss kontact-button-text "
+              role="button"
+              onClick={floorPlanOnClick}
+            >
+              <img src={iconLayers} className="" style={{ width: "18px" }} />{" "}
+              Grundriss
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="d-flex flex-column listing-compacts col-12">
+        <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 ">
+            Charmante Altbauwohnung in zentraler Lage – ideal für Familien oder
+            Paare
+            {props.title}
+          </span>
+        </div>
+        <div>
+          {" "}
+          <div className="d-flex ">
+            <img src={locationIcon} alt="Location Icon" className="Vector" />
+            <span className="locationTexts ">
+              {props.property.city || "N/A"}
+            </span>
+          </div>
+        </div>
+        <div className="d-flex  flex-row ">
+          <div className="d-flex col-5">
+            <span className="value   ">
+              {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
+              <br />
+              <span className="details">Kaufpreis</span>
+            </span>
+          </div>
+          <span className="text-dark value col-lg-4 col-md-4 col-sm-6 text-truncate  ">
+            {+props.property.rooms}
+            <br />
+            <span className="details">
+              {" "}
+              <span>Zimmer</span>
+            </span>
+          </span>
+          <span className="text-dark value col-lg-3 col-md-3 col-sm-4 text-truncate ">
+            {+props.property.bathrooms}
+            <br />
+            <span className="details">
+              <span>Bad</span>
+            </span>
+          </span>
+          <span className="text-dark value col-lg-6 col-md-5 col-sm-7  me-3">
+            {props.property.usableArea} m²
+            <br />
+            <span className="details">
+              <span>Wohnfläche</span>
+            </span>
+          </span>
+        </div>
+        <div className="labelTopClass d-flex top-0 start-0 col-sm-5 col-lg-8 ">
+          <div className=" align-items-center d-flex flex-row  gap-2">
+            {props.property.historicalProtection && (
+              <label className="thirdLabels justify-content-center align-items-center">
+                <span className="layersText ">{"Denkmalschutz"}</span>
+              </label>
+            )}
+
+            {props.property.basement && (
+              <label className="secondLabel  justify-content-center align-items-center">
+                <span className="layersText ">{"Keller"}</span>
+              </label>
+            )}
+            {props.property.balcony && (
+              <label className="secondLabel  justify-content-center align-items-center">
+                <span className="layersText ">{"Balkon"}</span>
+              </label>
+            )}
+          </div>
+        </div>
+        <div className="d-flex flex-row align-items-center  gap-2">
+          {props.property.terrace && (
+            <label className="thirdLabels justify-content-center align-items-center ">
+              <span className="layersText">{"Terrace"}</span>
+            </label>
+          )}
+          <div className="d-flex ">
+            {props.property.guestBathroom && (
+              <label className="col-1 thirdLabels justify-content-center align-items-center ">
+                <span className="layersText  ">{"Gäste-WC"}</span>
+              </label>
+            )}
+          </div>
+        </div>
+        <div className="Frame-136 d-flex flex-row">
+          <div className="d-flex flex-column col-5 justify-content-between">
+            <span className="h4">
+              <strong>McGrath</strong>{" "}
+            </span>
+          </div>
+          <div className="d-flex flex-column justify-content-between">
+            <span>
+              <strong>Herr John McGrath</strong>{" "}
+            </span>
+            <span>McGrath</span>
+            <button
+              className="kontactbutton text-light "
+              onClick={handleMessagPopUp}
+              role="button"
+            >
+              <span className="kontact-button-text">Kontakt aufnehmen </span>
+            </button>
+          </div>
+        </div>
+      </div>
+      {floorPlan && (
+        <FloorPlanPopup
+          contentUrl={props.property.pictures[0]?.contentUrl || noImageIcon}
+          onCloseClick={() => setFloorPlan(false)}
+        />
+      )}
+      {/* {messagePopUp && (
+        <MessagePopUp
+          onClick={() => setMessagPopUp(false)}
+          property={props.property}
+        />
+      )} */}
+      {sharePopUp && <SharePopup onClick={() => setSharePopUp(false)} />}
+    </div>
+  );
+}