nestiq-component-library 1.1.0 → 1.1.2

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 (40) hide show
  1. package/dist/assets/images/Icon_rightArrow.svg +3 -0
  2. package/dist/assets/images/LayersIcon.svg +5 -0
  3. package/dist/assets/images/blackarrow-Right.svg +3 -0
  4. package/dist/assets/images/blckarrow-Left.svg +3 -0
  5. package/dist/assets/images/chevron-left.svg +3 -0
  6. package/dist/assets/images/default-property.jpg +0 -0
  7. package/dist/assets/images/heartIcon.svg +3 -0
  8. package/dist/assets/images/icon-close-white.webp +0 -0
  9. package/dist/assets/images/icon_close 2.e41bb9a4db48e048.png +0 -0
  10. package/dist/assets/images/icon_close_2.png +0 -0
  11. package/dist/assets/images/icon_gallery.svg +4 -0
  12. package/dist/assets/images/icon_map.svg +10 -0
  13. package/dist/assets/images/icon_share_1.svg +3 -0
  14. package/dist/assets/images/layer_icon.svg +5 -0
  15. package/dist/assets/images/locationIcon.svg +4 -0
  16. package/dist/assets/images/locationIconBlack.svg +4 -0
  17. package/dist/assets/images/no-image-icon.png +0 -0
  18. package/dist/components/Button/Button.js +6 -0
  19. package/dist/components/ImageListPopup/ImageListPopup.js +26 -0
  20. package/dist/components/Popup/Popup.js +12 -0
  21. package/dist/components/PropertyDetailsHeader/PropertyDetailsHeader.d.ts +2 -2
  22. package/dist/components/SharePopup/PopUp.d.ts +7 -0
  23. package/dist/index.es.js +12 -13
  24. package/dist/index.es.js.map +1 -1
  25. package/dist/index.js +12 -13
  26. package/dist/index.js.map +1 -1
  27. package/package.json +1 -1
  28. package/rollup.config.mjs +35 -35
  29. package/src/components/FloorPlanPopup/FloorPlanPopup.css +3 -3
  30. package/src/components/FloorPlanPopup/FloorPlanPopup.tsx +83 -83
  31. package/src/components/ImageListPopup/ImageListPopup.css +83 -83
  32. package/src/components/ImageListPopup/ImageListPopup.tsx +141 -141
  33. package/src/components/Popup/Popup.tsx +29 -29
  34. package/src/components/PropertyCard/PropertyCard.tsx +136 -136
  35. package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +82 -80
  36. package/src/components/PropertyImageList/PropertyImageList.tsx +198 -198
  37. package/src/components/SharePopup/SharePopup.tsx +139 -139
  38. package/src/components/ToastWrapper/ToastWrapper.tsx +25 -25
  39. package/src/functions/util.ts +3 -3
  40. package/src/index.tsx +20 -20
@@ -1,139 +1,139 @@
1
- import React, { useRef, useState } from "react";
2
- import email from "../../assets/images/envelope-fill.svg";
3
- import facebook from "../../assets/images/facebook.svg";
4
- import x from "../../assets/images/icon_close_2.png";
5
- import linkedln from "../../assets/images/linkedin.svg";
6
- import Xtwitter from "../../assets/images/twitter-x.svg";
7
- import whatsapp from "../../assets/images/whatsapp.svg";
8
- import "./SharePopup.css";
9
- import { toast } from "react-toastify";
10
- import "../../styles/common.css";
11
-
12
- export default function SharePopup() {
13
- const [showPopUp, setShowPopUp] = useState(true);
14
-
15
- const handleClose = () => {
16
- setShowPopUp(false);
17
- };
18
- const urlInputRef = useRef<HTMLInputElement | null>(null);
19
-
20
- const copyToClipboard = () => {
21
- urlInputRef.current!.select();
22
- document.execCommand("copy");
23
- toast.success("URL copied to clipboard!");
24
- };
25
-
26
- return (
27
- <div>
28
- {showPopUp && (
29
- <div className="popup-overlay">
30
- <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">
31
- <div className="end-0 top-0 position-absolute ">
32
- <img
33
- src={x}
34
- alt="close"
35
- className="closeIcon me-2"
36
- onClick={handleClose}
37
- />
38
- </div>
39
- <div className="popUpHeader col-lg-12 d-flex justify-content-center mb-2">
40
- Jetzt teilen und weitersagen!
41
- </div>
42
- <div className="h-25 col-lg-12 socialMediaIconsSection d-flex flex-row align-items-center justify-content-center mx-auto">
43
- <a
44
- href="https://twitter.com/intent/tweet?url=https://www.nestiq.de&text=Nestiq"
45
- className="text-decoration-none"
46
- target="blank"
47
- >
48
- <div className=" flex-column d-flex align-items-center">
49
- <img
50
- src={Xtwitter}
51
- alt="twitter"
52
- className="socialMediaIcons"
53
- />
54
- <span className="socialMediaIconText">Xtwitter</span>
55
- </div>
56
- </a>
57
-
58
- <a
59
- href="https://www.facebook.com/sharer/sharer.php?u=https://www.nestiq.de"
60
- className="text-decoration-none"
61
- target="blank"
62
- >
63
- <div className=" flex-column d-flex align-items-center">
64
- <img
65
- src={facebook}
66
- alt="facebook"
67
- className="socialMediaIcons "
68
- />
69
- <span className="socialMediaIconText">Facebook</span>
70
- </div>
71
- </a>
72
-
73
- <a
74
- href="https://api.whatsapp.com/send?text=https://www.nestiq.de"
75
- target="blank"
76
- className="text-decoration-none"
77
- >
78
- <div className=" flex-column d-flex align-items-center">
79
- <img
80
- src={whatsapp}
81
- alt="whatsapp"
82
- className=" socialMediaIcons"
83
- />
84
- <span className="socialMediaIconText">WhatsApp</span>
85
- </div>
86
- </a>
87
-
88
- <a
89
- href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.nestiq.de"
90
- target="blank"
91
- className="text-decoration-none"
92
- >
93
- <div className=" flex-column d-flex align-items-center">
94
- <img
95
- src={linkedln}
96
- alt="linkedin"
97
- className=" socialMediaIcons"
98
- />
99
- <span className="socialMediaIconText">LinkedIn</span>
100
- </div>
101
- </a>
102
-
103
- <a
104
- href="https://www.nestiq.de"
105
- target="blank"
106
- className="text-decoration-none"
107
- >
108
- <div className=" flex-column d-flex align-items-center">
109
- <img src={email} alt="email" className=" socialMediaIcons" />
110
- <span className="socialMediaIconText">E-mail</span>
111
- </div>
112
- </a>
113
- </div>
114
- <div className="col-10 mx-auto">
115
- <div className=" row align-items-center position-relative">
116
- <input
117
- ref={urlInputRef}
118
- type="text"
119
- className="popup_search-input rounded-4 border border-0 "
120
- placeholder="Enter link here"
121
- value={window.location.href}
122
- readOnly
123
- />
124
- <button
125
- onClick={copyToClipboard}
126
- className="popupcustom-button border border-0 position-absolute me-2 col-lg-3 col-md-3 col-sm-3 rounded-4 fs-6"
127
- type="button"
128
- id="button"
129
- >
130
- <strong>Kopieren</strong>
131
- </button>
132
- </div>
133
- </div>
134
- </div>
135
- </div>
136
- )}
137
- </div>
138
- );
139
- }
1
+ import React, { useRef, useState } from "react";
2
+ import email from "../../assets/images/envelope-fill.svg";
3
+ import facebook from "../../assets/images/facebook.svg";
4
+ import x from "../../assets/images/icon_close_2.png";
5
+ import linkedln from "../../assets/images/linkedin.svg";
6
+ import Xtwitter from "../../assets/images/twitter-x.svg";
7
+ import whatsapp from "../../assets/images/whatsapp.svg";
8
+ import "./SharePopup.css";
9
+ import { toast } from "react-toastify";
10
+ import "../../styles/common.css";
11
+
12
+ export default function SharePopup() {
13
+ const [showPopUp, setShowPopUp] = useState(true);
14
+
15
+ const handleClose = () => {
16
+ setShowPopUp(false);
17
+ };
18
+ const urlInputRef = useRef<HTMLInputElement | null>(null);
19
+
20
+ const copyToClipboard = () => {
21
+ urlInputRef.current!.select();
22
+ document.execCommand("copy");
23
+ toast.success("URL copied to clipboard!");
24
+ };
25
+
26
+ return (
27
+ <div>
28
+ {showPopUp && (
29
+ <div className="popup-overlay">
30
+ <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">
31
+ <div className="end-0 top-0 position-absolute ">
32
+ <img
33
+ src={x}
34
+ alt="close"
35
+ className="closeIcon me-2"
36
+ onClick={handleClose}
37
+ />
38
+ </div>
39
+ <div className="popUpHeader col-lg-12 d-flex justify-content-center mb-2">
40
+ Jetzt teilen und weitersagen!
41
+ </div>
42
+ <div className="h-25 col-lg-12 socialMediaIconsSection d-flex flex-row align-items-center justify-content-center mx-auto">
43
+ <a
44
+ href="https://twitter.com/intent/tweet?url=https://www.nestiq.de&text=Nestiq"
45
+ className="text-decoration-none"
46
+ target="blank"
47
+ >
48
+ <div className=" flex-column d-flex align-items-center">
49
+ <img
50
+ src={Xtwitter}
51
+ alt="twitter"
52
+ className="socialMediaIcons"
53
+ />
54
+ <span className="socialMediaIconText">X (Twitter)</span>
55
+ </div>
56
+ </a>
57
+
58
+ <a
59
+ href="https://www.facebook.com/sharer/sharer.php?u=https://www.nestiq.de"
60
+ className="text-decoration-none"
61
+ target="blank"
62
+ >
63
+ <div className=" flex-column d-flex align-items-center">
64
+ <img
65
+ src={facebook}
66
+ alt="facebook"
67
+ className="socialMediaIcons "
68
+ />
69
+ <span className="socialMediaIconText">Facebook</span>
70
+ </div>
71
+ </a>
72
+
73
+ <a
74
+ href="https://api.whatsapp.com/send?text=https://www.nestiq.de"
75
+ target="blank"
76
+ className="text-decoration-none"
77
+ >
78
+ <div className=" flex-column d-flex align-items-center">
79
+ <img
80
+ src={whatsapp}
81
+ alt="whatsapp"
82
+ className=" socialMediaIcons"
83
+ />
84
+ <span className="socialMediaIconText">WhatsApp</span>
85
+ </div>
86
+ </a>
87
+
88
+ <a
89
+ href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.nestiq.de"
90
+ target="blank"
91
+ className="text-decoration-none"
92
+ >
93
+ <div className=" flex-column d-flex align-items-center">
94
+ <img
95
+ src={linkedln}
96
+ alt="linkedin"
97
+ className=" socialMediaIcons"
98
+ />
99
+ <span className="socialMediaIconText">LinkedIn</span>
100
+ </div>
101
+ </a>
102
+
103
+ <a
104
+ href="https://www.nestiq.de"
105
+ target="blank"
106
+ className="text-decoration-none"
107
+ >
108
+ <div className=" flex-column d-flex align-items-center">
109
+ <img src={email} alt="email" className=" socialMediaIcons" />
110
+ <span className="socialMediaIconText">E-Mail</span>
111
+ </div>
112
+ </a>
113
+ </div>
114
+ <div className="col-10 mx-auto">
115
+ <div className=" row align-items-center position-relative">
116
+ <input
117
+ ref={urlInputRef}
118
+ type="text"
119
+ className="popup_search-input rounded-4 border border-0 "
120
+ placeholder="Enter link here"
121
+ value={window.location.href}
122
+ readOnly
123
+ />
124
+ <button
125
+ onClick={copyToClipboard}
126
+ className="popupcustom-button border border-0 position-absolute me-2 col-lg-3 col-md-3 col-sm-3 rounded-4 fs-6"
127
+ type="button"
128
+ id="button"
129
+ >
130
+ <strong>Kopieren</strong>
131
+ </button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ )}
137
+ </div>
138
+ );
139
+ }
@@ -1,25 +1,25 @@
1
- import React from "react";
2
- import { ToastContainer, toast } from "react-toastify";
3
-
4
- // Utility function to show a toast
5
- export const showToast = (
6
- message: string,
7
- type: "info" | "success" | "warning" | "error" = "info",
8
- ) => {
9
- toast(message, { type });
10
- };
11
-
12
- const ToastWrapper: React.FC = () => (
13
- <ToastContainer
14
- position="top-right"
15
- autoClose={5000}
16
- hideProgressBar={false}
17
- closeOnClick
18
- rtl={false}
19
- pauseOnFocusLoss
20
- draggable
21
- pauseOnHover
22
- />
23
- );
24
-
25
- export default ToastWrapper;
1
+ import React from "react";
2
+ import { ToastContainer, toast } from "react-toastify";
3
+
4
+ // Utility function to show a toast
5
+ export const showToast = (
6
+ message: string,
7
+ type: "info" | "success" | "warning" | "error" = "info",
8
+ ) => {
9
+ toast(message, { type });
10
+ };
11
+
12
+ const ToastWrapper: React.FC = () => (
13
+ <ToastContainer
14
+ position="top-right"
15
+ autoClose={5000}
16
+ hideProgressBar={false}
17
+ closeOnClick
18
+ rtl={false}
19
+ pauseOnFocusLoss
20
+ draggable
21
+ pauseOnHover
22
+ />
23
+ );
24
+
25
+ export default ToastWrapper;
@@ -1,3 +1,3 @@
1
- export function formatPrice(number: number): string {
2
- return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
3
- }
1
+ export function formatPrice(number: number): string {
2
+ return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
3
+ }
package/src/index.tsx CHANGED
@@ -1,20 +1,20 @@
1
- import "react-toastify/dist/ReactToastify.css";
2
-
3
- // COMPONENTS
4
- export { default as Button } from "./components/Button/Button";
5
- export { default as Popup } from "./components/Popup/Popup";
6
- // export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
7
- export { default as PropertyDetailsHeader } from "./components/PropertyDetailsHeader/PropertyDetailsHeader";
8
- export { default as PropertyImageList } from "./components/PropertyImageList//PropertyImageList";
9
- export { default as PropertyCard } from "./components/PropertyCard//PropertyCard";
10
- export { default as SharePopup } from "./components/SharePopup/SharePopup";
11
- export { default as FloorPlanPopup } from "./components/FloorPlanPopup/FloorPlanPopup";
12
-
13
- // TOASTER WRAPPER AND FUNCTION
14
- export {
15
- default as ToastWrapper,
16
- showToast,
17
- } from "./components/ToastWrapper/ToastWrapper";
18
-
19
- // UTILITY FUNCTIONS
20
- export { formatPrice } from "./functions/util";
1
+ import "react-toastify/dist/ReactToastify.css";
2
+
3
+ // COMPONENTS
4
+ export { default as Button } from "./components/Button/Button";
5
+ export { default as Popup } from "./components/Popup/Popup";
6
+ // export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
7
+ export { default as PropertyDetailsHeader } from "./components/PropertyDetailsHeader/PropertyDetailsHeader";
8
+ export { default as PropertyImageList } from "./components/PropertyImageList//PropertyImageList";
9
+ export { default as PropertyCard } from "./components/PropertyCard//PropertyCard";
10
+ export { default as SharePopup } from "./components/SharePopup/SharePopup";
11
+ export { default as FloorPlanPopup } from "./components/FloorPlanPopup/FloorPlanPopup";
12
+
13
+ // TOASTER WRAPPER AND FUNCTION
14
+ export {
15
+ default as ToastWrapper,
16
+ showToast,
17
+ } from "./components/ToastWrapper/ToastWrapper";
18
+
19
+ // UTILITY FUNCTIONS
20
+ export { formatPrice } from "./functions/util";