nestiq-component-library 1.0.8 → 1.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/assets/images/blackarrow-Right.svg +3 -0
  2. package/dist/assets/images/blckarrow-Left.svg +3 -0
  3. package/dist/assets/images/icon_close_2.png +0 -0
  4. package/dist/assets/images/locationIconBlack.svg +4 -0
  5. package/dist/components/PropertyDetailsHeader/PropertyDetailsHeader.d.ts +3 -0
  6. package/dist/index.d.ts +1 -0
  7. package/dist/index.es.js +43 -11
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/index.js +43 -10
  10. package/dist/index.js.map +1 -1
  11. package/package.json +2 -1
  12. package/rollup.config.mjs +40 -31
  13. package/src/assets/images/blackarrow-Right.svg +3 -0
  14. package/src/assets/images/blckarrow-Left.svg +3 -0
  15. package/src/assets/images/icon_close_2.png +0 -0
  16. package/src/assets/images/icon_share_1.svg +3 -0
  17. package/src/components/ImageListPopup/ImageListPopup.css +107 -49
  18. package/src/components/ImageListPopup/ImageListPopup.tsx +100 -62
  19. package/src/components/Popup/Popup.tsx +28 -28
  20. package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +70 -71
  21. package/src/index.tsx +1 -0
  22. package/dist/components/Button/Button.js +0 -6
  23. package/dist/components/ImageListPopup/ImageListPopup.js +0 -26
  24. package/dist/components/Popup/Popup.js +0 -12
  25. package/src/components/SharePopup/PopUp.css +0 -359
  26. package/src/components/SharePopup/PopUp.tsx +0 -99
  27. /package/{src → dist}/assets/images/icon_close 2.png +0 -0
  28. /package/{src/assets/images/icon_share 1.svg → dist/assets/images/icon_share_1.svg} +0 -0
package/src/components/ImageListPopup/ImageListPopup.tsx CHANGED
@@ -1,62 +1,100 @@
1
- import React, { useState } from "react";
2
- import "bootstrap/dist/css/bootstrap.min.css";
3
- import "./ImageListPopup.css";
4
-
5
- interface Image {
6
- src: string;
7
- title: string;
8
- }
9
-
10
- interface ImageListPopupProps {
11
- images: Image[];
12
- onClose: () => void;
13
- }
14
-
15
- const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
16
- const [currentIndex, setCurrentIndex] = useState(0);
17
-
18
- const handlePrevious = () => {
19
- setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
20
- };
21
-
22
- const handleNext = () => {
23
- setCurrentIndex((prevIndex) =>
24
- prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
25
- );
26
- };
27
-
28
- return (
29
- <div className="popup-overlay">
30
- <div className="popup-container">
31
- <div className="popup-header">
32
- <span>{images[currentIndex].title}</span>
33
- <button className="btn-close" onClick={onClose}></button>
34
- </div>
35
- <div className="popup-body">
36
- <img
37
- src={images[currentIndex].src}
38
- alt={images[currentIndex].title}
39
- className="img-fluid"
40
- />
41
- </div>
42
- <div className="popup-footer">
43
- {images.length > 1 && (
44
- <>
45
- <button
46
- className="btn btn-secondary me-2"
47
- onClick={handlePrevious}
48
- >
49
- Previous
50
- </button>
51
- <button className="btn btn-secondary" onClick={handleNext}>
52
- Next
53
- </button>
54
- </>
55
- )}
56
- </div>
57
- </div>
58
- </div>
59
- );
60
- };
61
-
62
- export default ImageListPopup;
1
+ import React, { useState } from "react";
2
+ import "bootstrap/dist/css/bootstrap.min.css";
3
+ import "./ImageListPopup.css";
4
+ import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
5
+ import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
6
+
7
+ interface Image {
8
+ src: string;
9
+ title: string;
10
+ }
11
+
12
+ interface ImageListPopupProps {
13
+ images: Image[];
14
+ onClose: () => void;
15
+ }
16
+
17
+ const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
18
+ const [currentIndex, setCurrentIndex] = useState(0);
19
+
20
+ const handlePrevious = () => {
21
+ setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
22
+ };
23
+
24
+ const handleNext = () => {
25
+ setCurrentIndex((prevIndex) =>
26
+ prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
27
+ );
28
+ };
29
+
30
+ const handleThumbnailClick = (index: number) => {
31
+ setCurrentIndex(index);
32
+ };
33
+
34
+ return (
35
+ <div className="popup-overlay">
36
+ <div className="popup-container">
37
+ <div className="popup-header">
38
+ <span className="popup-title">{images[currentIndex].title}</span>
39
+ <button className="btn-close" onClick={onClose}></button>
40
+ </div>
41
+ <div className="popup-body">
42
+ <div
43
+ className="rounded-circle border btn-prev"
44
+ role="button"
45
+ onClick={handlePrevious}
46
+ >
47
+ <img
48
+ src={blcIconArrowLeft}
49
+ className="blackArrow"
50
+ alt="Left Arrow"
51
+ ></img>
52
+ </div>
53
+ {/*<button*/}
54
+ {/* className="btn-prev"*/}
55
+ {/* onClick={handlePrevious}*/}
56
+ {/* disabled={currentIndex === 0}*/}
57
+ {/*>*/}
58
+ {/* &lt;*/}
59
+ {/*</button>*/}
60
+ <img
61
+ src={images[currentIndex].src}
62
+ alt={images[currentIndex].title}
63
+ className="main-image"
64
+ />
65
+ <div
66
+ className="rounded-circle border btn-next"
67
+ role="button"
68
+ onClick={handleNext}
69
+ >
70
+ <img
71
+ src={blcIconArrowRight}
72
+ className="blackArrow"
73
+ alt="Right Arrow"
74
+ ></img>
75
+ </div>
76
+ {/*<button*/}
77
+ {/* className="btn-next"*/}
78
+ {/* onClick={handleNext}*/}
79
+ {/* disabled={currentIndex === images.length - 1}*/}
80
+ {/*>*/}
81
+ {/* &gt;*/}
82
+ {/*</button>*/}
83
+ </div>
84
+ <div className="popup-thumbnails">
85
+ {images.map((image, index) => (
86
+ <img
87
+ key={index}
88
+ src={image.src}
89
+ alt={image.title}
90
+ className={`thumbnail ${index === currentIndex ? "active" : ""}`}
91
+ onClick={() => handleThumbnailClick(index)}
92
+ />
93
+ ))}
94
+ </div>
95
+ </div>
96
+ </div>
97
+ );
98
+ };
99
+
100
+ export default ImageListPopup;
package/src/components/Popup/Popup.tsx CHANGED
@@ -1,28 +1,28 @@
1
- import React from "react";
2
- import closeIcon from "src/assets/images/icon_close 2.png";
3
- import "./Popup.css";
4
-
5
- interface PopupProps {
6
- children: React.ReactNode;
7
- onCloseClick: () => void;
8
- }
9
-
10
- const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
11
- return (
12
- <div className="popup-overlay">
13
- <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">
14
- <div className="end-0 top-0 position-absolute ">
15
- <img
16
- src={closeIcon}
17
- alt="close"
18
- className="closeIcon me-2"
19
- onClick={onCloseClick}
20
- />
21
- </div>
22
- {children}
23
- </div>
24
- </div>
25
- );
26
- };
27
-
28
- export default Popup;
1
+ import React from "react";
2
+ import closeIcon from "../../assets/images/icon_close_2.png";
3
+ import "./Popup.css";
4
+
5
+ interface PopupProps {
6
+ children: React.ReactNode;
7
+ onCloseClick: () => void;
8
+ }
9
+
10
+ const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
11
+ return (
12
+ <div className="popup-overlay">
13
+ <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">
14
+ <div className="end-0 top-0 position-absolute ">
15
+ <img
16
+ src={closeIcon}
17
+ alt="close"
18
+ className="closeIcon me-2"
19
+ onClick={onCloseClick}
20
+ />
21
+ </div>
22
+ {children}
23
+ </div>
24
+ </div>
25
+ );
26
+ };
27
+
28
+ export default Popup;
package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx CHANGED
@@ -1,71 +1,70 @@
1
- import React, { useState } from "react";
2
- // import { FormattedMessage } from "react-intl";
3
- import ShareIcon from "../../../../../assets/Images/icon_share 1.svg";
4
- import locationIcon from "../../../../../assets/Images/locationIconBlack.svg";
5
- import PopUp from "../SharePopup/PopUp";
6
- import "./PropertyDetailsHeader.css";
7
-
8
- export default function PropertyDetailsHeader() {
9
-
10
- const [showPopUp, setShowPopUp] = useState(false);
11
-
12
- const handlePopUp = () => {
13
- setShowPopUp(!showPopUp);
14
- };
15
-
16
- return (
17
- <div className="Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 ">
18
- <div className="header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 ">
19
- <strong>
20
- Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in
21
- top Lage
22
- </strong>
23
- </div>
24
- <div className="header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4">
25
- <img src={locationIcon} alt="Location Icon" className="vector me-2" />
26
- {/* {property && (
27
- <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
28
- {property.city}
29
- </div>
30
- )} */}
31
- </div>
32
- <div className="d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4">
33
- {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
34
- <img
35
- src={ShareIcon}
36
- alt="Location Icon"
37
- className="v_share me-3"
38
- onClick={handlePopUp}
39
- />
40
- </div>
41
- <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">
42
- {/* {property && (
43
- <div className=" propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center ">
44
- {property?.evaluation?.askingPrice} € <br />
45
- Kaufpreis
46
- </div>
47
- )}
48
- {property && (
49
- <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
50
- {property.constructedArea} m² <br />
51
- <FormattedMessage id="LIVING_SPACE" />
52
- </div>
53
- )}
54
- {property && (
55
- <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
56
- {property.rooms} <br />
57
- <FormattedMessage id="ROOMS" />
58
- </div>
59
- )}
60
- {property && (
61
- <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
62
- {property.propertyArea} m²
63
- <br />
64
- <FormattedMessage id="Grundstück" />
65
- </div>
66
- )} */}
67
- </div>
68
- {showPopUp && <PopUp onClick={handlePopUp} />}
69
- </div>
70
- );
71
- }
1
+ import React, { useState } from "react";
2
+ // import { FormattedMessage } from "react-intl";
3
+ import ShareIcon from "../../assets/images/icon_share_1.svg";
4
+ import locationIcon from "../../assets/images/locationIconBlack.svg";
5
+ // import PopUp from "../SharePopup/PopUp";
6
+ import "./PropertyDetailsHeader.css";
7
+
8
+ export default function PropertyDetailsHeader() {
9
+ const [showPopUp, setShowPopUp] = useState(false);
10
+
11
+ const handlePopUp = () => {
12
+ setShowPopUp(!showPopUp);
13
+ };
14
+
15
+ return (
16
+ <div className="Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 ">
17
+ <div className="header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 ">
18
+ <strong>
19
+ Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in
20
+ top Lage
21
+ </strong>
22
+ </div>
23
+ <div className="header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4">
24
+ <img src={locationIcon} alt="Location Icon" className="vector me-2" />
25
+ {/* {property && (
26
+ <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
27
+ {property.city}
28
+ </div>
29
+ )} */}
30
+ </div>
31
+ <div className="d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4">
32
+ {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
33
+ <img
34
+ src={ShareIcon}
35
+ alt="Location Icon"
36
+ className="v_share me-3"
37
+ onClick={handlePopUp}
38
+ />
39
+ </div>
40
+ <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">
41
+ {/* {property && (
42
+ <div className=" propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center ">
43
+ {property?.evaluation?.askingPrice} € <br />
44
+ Kaufpreis
45
+ </div>
46
+ )}
47
+ {property && (
48
+ <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
49
+ {property.constructedArea} m² <br />
50
+ <FormattedMessage id="LIVING_SPACE" />
51
+ </div>
52
+ )}
53
+ {property && (
54
+ <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
55
+ {property.rooms} <br />
56
+ <FormattedMessage id="ROOMS" />
57
+ </div>
58
+ )}
59
+ {property && (
60
+ <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
61
+ {property.propertyArea} m²
62
+ <br />
63
+ <FormattedMessage id="Grundstück" />
64
+ </div>
65
+ )} */}
66
+ </div>
67
+ {/*{showPopUp && <PopUp onClick={handlePopUp} />}*/}
68
+ </div>
69
+ );
70
+ }
package/src/index.tsx CHANGED
@@ -1,3 +1,4 @@
1
1
  export { default as Button } from "./components/Button/Button";
2
2
  export { default as Popup } from "./components/Popup/Popup";
3
3
  export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
4
+ export { default as PropertyDetailsHeader } from "./components/PropertyDetailsHeader/PropertyDetailsHeader";
package/dist/components/Button/Button.js DELETED
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- var Button = function (_a) {
3
- var label = _a.label;
4
- return React.createElement("button", null, label);
5
- };
6
- export default Button;
package/dist/components/ImageListPopup/ImageListPopup.js DELETED
@@ -1,26 +0,0 @@
1
- import React, { useState } from "react";
2
- import "bootstrap/dist/css/bootstrap.min.css";
3
- import "./ImageListPopup.css";
4
- var ImageListPopup = function (_a) {
5
- var images = _a.images, onClose = _a.onClose;
6
- var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
7
- var handlePrevious = function () {
8
- setCurrentIndex(function (prevIndex) { return (prevIndex > 0 ? prevIndex - 1 : prevIndex); });
9
- };
10
- var handleNext = function () {
11
- setCurrentIndex(function (prevIndex) {
12
- return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
13
- });
14
- };
15
- return (React.createElement("div", { className: "popup-overlay" },
16
- React.createElement("div", { className: "popup-container" },
17
- React.createElement("div", { className: "popup-header" },
18
- React.createElement("span", null, images[currentIndex].title),
19
- React.createElement("button", { className: "btn-close", onClick: onClose })),
20
- React.createElement("div", { className: "popup-body" },
21
- React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
22
- React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
23
- React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
24
- React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
25
- };
26
- export default ImageListPopup;
package/dist/components/Popup/Popup.js DELETED
@@ -1,12 +0,0 @@
1
- import React from "react";
2
- import closeIcon from "src/assets/images/icon_close 2.png";
3
- import "./Popup.css";
4
- var Popup = function (_a) {
5
- var onCloseClick = _a.onCloseClick, children = _a.children;
6
- return (React.createElement("div", { className: "popup-overlay" },
7
- React.createElement("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" },
8
- React.createElement("div", { className: "end-0 top-0 position-absolute " },
9
- React.createElement("img", { src: closeIcon, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
10
- children)));
11
- };
12
- export default Popup;