nestiq-component-library 1.0.6 → 1.0.8

package/src/components/ImageListPopup/ImageListPopup.tsx

@@ -1,100 +1,62 @@
-import React, { useState } from "react";
-import "bootstrap/dist/css/bootstrap.min.css";
-import "./ImageListPopup.css";
-import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
-import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
-
-interface Image {
-  src: string;
-  title: string;
-}
-
-interface ImageListPopupProps {
-  images: Image[];
-  onClose: () => void;
-}
-
-const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  const handlePrevious = () => {
-    setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
-  };
-
-  const handleNext = () => {
-    setCurrentIndex((prevIndex) =>
-      prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
-    );
-  };
-
-  const handleThumbnailClick = (index: number) => {
-    setCurrentIndex(index);
-  };
-
-  return (
-    <div className="popup-overlay">
-      <div className="popup-container">
-        <div className="popup-header">
-          <span className="popup-title">{images[currentIndex].title}</span>
-          <button className="btn-close" onClick={onClose}></button>
-        </div>
-        <div className="popup-body">
-          <div
-            className="rounded-circle border btn-prev"
-            role="button"
-            onClick={handlePrevious}
-          >
-            <img
-              src={blcIconArrowLeft}
-              className="blackArrow"
-              alt="Left Arrow"
-            ></img>
-          </div>
-          {/*<button*/}
-          {/*  className="btn-prev"*/}
-          {/*  onClick={handlePrevious}*/}
-          {/*  disabled={currentIndex === 0}*/}
-          {/*>*/}
-          {/*  &lt;*/}
-          {/*</button>*/}
-          <img
-            src={images[currentIndex].src}
-            alt={images[currentIndex].title}
-            className="main-image"
-          />
-          <div
-            className="rounded-circle border btn-next"
-            role="button"
-            onClick={handleNext}
-          >
-            <img
-              src={blcIconArrowRight}
-              className="blackArrow"
-              alt="Right Arrow"
-            ></img>
-          </div>
-          {/*<button*/}
-          {/*  className="btn-next"*/}
-          {/*  onClick={handleNext}*/}
-          {/*  disabled={currentIndex === images.length - 1}*/}
-          {/*>*/}
-          {/*  &gt;*/}
-          {/*</button>*/}
-        </div>
-        <div className="popup-thumbnails">
-          {images.map((image, index) => (
-            <img
-              key={index}
-              src={image.src}
-              alt={image.title}
-              className={`thumbnail ${index === currentIndex ? "active" : ""}`}
-              onClick={() => handleThumbnailClick(index)}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ImageListPopup;
+import React, { useState } from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./ImageListPopup.css";
+
+interface Image {
+  src: string;
+  title: string;
+}
+
+interface ImageListPopupProps {
+  images: Image[];
+  onClose: () => void;
+}
+
+const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handlePrevious = () => {
+    setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
+    );
+  };
+
+  return (
+    <div className="popup-overlay">
+      <div className="popup-container">
+        <div className="popup-header">
+          <span>{images[currentIndex].title}</span>
+          <button className="btn-close" onClick={onClose}></button>
+        </div>
+        <div className="popup-body">
+          <img
+            src={images[currentIndex].src}
+            alt={images[currentIndex].title}
+            className="img-fluid"
+          />
+        </div>
+        <div className="popup-footer">
+          {images.length > 1 && (
+            <>
+              <button
+                className="btn btn-secondary me-2"
+                onClick={handlePrevious}
+              >
+                Previous
+              </button>
+              <button className="btn btn-secondary" onClick={handleNext}>
+                Next
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageListPopup;

package/src/components/Popup/Popup.tsx

@@ -1,28 +1,28 @@
-import React from "react";
-import closeIcon from "../../assets/images/icon_close 2.png";
-import "./Popup.css";
-
-interface PopupProps {
-  children: React.ReactNode;
-  onCloseClick: () => void;
-}
-
-const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
-  return (
-    <div className="popup-overlay">
-      <div className="shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
-        <div className="end-0 top-0 position-absolute ">
-          <img
-            src={closeIcon}
-            alt="close"
-            className="closeIcon me-2"
-            onClick={onCloseClick}
-          />
-        </div>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default Popup;
+import React from "react";
+import closeIcon from "src/assets/images/icon_close 2.png";
+import "./Popup.css";
+
+interface PopupProps {
+  children: React.ReactNode;
+  onCloseClick: () => void;
+}
+
+const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
+  return (
+    <div className="popup-overlay">
+      <div className="shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
+        <div className="end-0 top-0 position-absolute ">
+          <img
+            src={closeIcon}
+            alt="close"
+            className="closeIcon me-2"
+            onClick={onCloseClick}
+          />
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Popup;

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.css

@@ -0,0 +1,46 @@
+.compact {
+  height: 194px;
+  border-radius: 32px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background-color: #f2f2f2;
+}
+
+.header_Text {
+  margin-top: 140px;
+  font-size: 32px;
+  line-height: normal;
+  color: #1b1b1b;
+}
+
+.vector svg {
+  width: 16px;
+  height: 21.5px;
+  flex-grow: 0;
+  margin: 4.2px 10px 4.2px 0;
+  fill: #344041;
+  cursor: pointer;
+}
+
+.propText {
+  height: 30px;
+  font-size: 16px;
+  letter-spacing: normal;
+  text-align: center;
+  color: #344041;
+}
+
+.v_share {
+  cursor: pointer;
+}
+
+.fetch_section {
+  margin-top: 90px;
+  height: 60px;
+}
+@media (min-width: 800px) {
+  .Pheader {
+    max-width: 1750px;
+    margin: 0 auto;
+    
+  }
+}

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+// import { FormattedMessage } from "react-intl";
+import ShareIcon from "../../../../../assets/Images/icon_share 1.svg";
+import locationIcon from "../../../../../assets/Images/locationIconBlack.svg";
+import PopUp from "../SharePopup/PopUp";
+import "./PropertyDetailsHeader.css";
+
+export default function PropertyDetailsHeader() {
+
+  const [showPopUp, setShowPopUp] = useState(false);
+
+  const handlePopUp = () => {
+    setShowPopUp(!showPopUp);
+  };
+
+  return (
+    <div className="Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 ">
+      <div className="header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 ">
+        <strong>
+          Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in
+          top Lage
+        </strong>
+      </div>
+      <div className="header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4">
+        <img src={locationIcon} alt="Location Icon" className="vector me-2" />
+        {/* {property && (
+          <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
+            {property.city}
+          </div>
+        )} */}
+      </div>
+      <div className="d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4">
+        {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
+        <img
+          src={ShareIcon}
+          alt="Location Icon"
+          className="v_share me-3"
+          onClick={handlePopUp}
+        />
+      </div>
+      <div className="fetch_section d-flex align-items-center flex-row col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0">
+        {/* {property && (
+          <div className=" propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center  ">
+            {property?.evaluation?.askingPrice} € <br />
+            Kaufpreis
+          </div>
+        )}
+        {property && (
+          <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
+            {property.constructedArea} m² <br />
+            <FormattedMessage id="LIVING_SPACE" />
+          </div>
+        )}
+        {property && (
+          <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
+            {property.rooms} <br />
+            <FormattedMessage id="ROOMS" />
+          </div>
+        )}
+        {property && (
+          <div className="propText  col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
+            {property.propertyArea} m²
+            <br />
+            <FormattedMessage id="Grundstück" />
+          </div>
+        )} */}
+      </div>
+      {showPopUp && <PopUp onClick={handlePopUp} />}
+    </div>
+  );
+}

package/src/components/SharePopup/PopUp.css

@@ -0,0 +1,359 @@
+.popup-overlay {
+  position: fixed; /* Fixed position to cover the whole screen */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color:  rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+  display: flex; /* Flexbox to center the popup */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+  z-index: 2000; /* Ensure it's above other content */
+ 
+}
+
+.shareSection {
+  height: 340px;
+  padding: 40px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #d7d9e3;
+  background-color: #fff;
+  
+}
+.popUpHeader {
+  height: 48px;
+  font-size: 32px;
+  font-weight: 600;
+  color: #1b1b1b;
+}
+
+.closeIcon {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.socialMediaIconsSection {
+  gap: 60px !important;
+}
+
+.socialMediaIcons {
+  width: 28px !important;
+  height: 28px !important;
+  cursor: pointer;
+}
+
+.socialMediaIconText {
+  height: 36px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 3;
+  color: #344041;
+  cursor: pointer;
+}
+
+.popup_search-input {
+  height: 60px;
+  padding-inline-end: 190px;
+  font-size: 20px;
+  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.popup_search-input::placeholder {
+  font-size: 20px;
+  color: rgba(140, 140, 140, 0.5);
+}
+
+.popup_search-input:focus {
+  outline: none;
+}
+
+.popupcustom-button {
+  height: 35px;
+  color: #000;
+  cursor: pointer;
+  border-color: #ffb525;
+  right: 0;
+  z-index: 1;
+  background-color: #ffb525;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+}
+.button-text {
+  width: 115px;
+  height: 19px;
+  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;
+}
+.button_success-right {
+  width: 184px;
+  height: 43px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 16px;
+  border-color: #000;
+  background-color: transparent;
+}
+.button_success-left {
+  width: 200px;
+  height: 43px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background-color: #ffb525;
+}
+.shareSection-Success {
+  height: 510px;
+  padding: 40px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #d7d9e3;
+  background-color: #fff;
+}
+.shareSection-Error {
+  height: 400px;
+  padding:10px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #d7d9e3;
+  background-color: #fff;
+}
+.MessageShareSection {
+  height: 513px;
+  padding: 14px 14px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #d7d9e3;
+  background-color: #fff;
+}
+
+.popup-tags {
+  font-size: large;
+  font-weight: bold;
+}
+.button_icon-left {
+  width: 184px;
+  height: 43px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background-color: #ffb525;
+}
+.button-text {
+  width: 85px;
+  height: 19px;
+  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;
+}
+.button_icon-right {
+  width: 184px;
+  height: 43px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 16px;
+  border-color: #000;
+  background-color: transparent;
+}
+.circle {
+  height: 55px;
+  width: 55px;
+  background-color: transparent;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: #000;
+  border-width: 2px;
+}
+.Line-9, .Line-10 {
+  height: 1px;
+  flex-grow: 1;
+  background-color: rgba(140, 140, 140, 0.5);
+  max-width:23rem;
+  align-self: center;
+  align-content: center;
+ 
+}
+
+.middle-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.middle-text {
+  margin: 25px 25px;
+}
+.google-button{
+  width: 260px;
+  height: 45px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 4px;
+  background-color: #000000;
+  background: linear-gradient(to top, #000 , #666 );
+  
+  
+}
+.Account-popup{
+   
+    height: 713px;
+    padding: 10px;
+    border-radius: 16px;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+    border: solid 1px #d7d9e3;
+    background-color: #fff;
+    max-width: 1000px;
+  
+}
+.lightertxt{
+  color: #797979;
+}
+
+.filter {
+  height: 343px;
+  align-self: stretch;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 32px;
+  border-radius: 32px;
+  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
+  background-color: #f2f2f2;
+}
+.loginFilter {
+  height: 280px;
+  align-self: stretch;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 32px;
+  border-radius: 32px;
+  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
+  background-color: #f2f2f2;
+}
+.radioLabel {
+  width: 176px;
+  height: 19px;
+  flex-grow: 0;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+  color: #1b1b1b;
+}
+.goButton-text {
+  width: 78px;
+  height: 19px;
+  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: #1b1b1b;
+}
+.placeholders {
+  width: 232px;
+  height: 45px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 4px;
+  background-image: linear-gradient(to top, #000 100%, #666 0%);
+}
+.TagW.active {
+  height: 40px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding: 0 24px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background-image: linear-gradient(to top, #000 , #666);
+  color: white;
+}
+.Tag {
+  height: 40px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding: 0 24px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+background-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255,0,0,1));}
+.TagW {
+  height: 40px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding: 0 24px;
+  border-radius: 16px;
+  border: solid 1px #000;
+  background-color: #fff;
+    color: #000;
+
+}
+/* */