nestiq-component-library 1.0.7 → 1.0.9
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.
- package/package.json +1 -1
- package/src/assets/images/icon_share 1.svg +3 -0
- package/src/assets/images/locationIconBlack.svg +4 -0
- package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.css +46 -0
- package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +71 -0
- package/src/components/SharePopup/PopUp.css +359 -0
- package/src/components/SharePopup/PopUp.tsx +99 -0
- package/src/index.tsx +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M22.046 9.9h-2.56a.937.937 0 1 0 0 1.875h2.56c.517 0 .938.42.938.937v12.26c0 .517-.42.938-.938.938H7.953a.939.939 0 0 1-.937-.938v-12.26c0-.517.42-.937.937-.937h2.56a.937.937 0 1 0 0-1.875h-2.56a2.816 2.816 0 0 0-2.812 2.812v12.26a2.816 2.816 0 0 0 2.812 2.813h14.093a2.816 2.816 0 0 0 2.813-2.813v-12.26A2.816 2.816 0 0 0 22.046 9.9zM11.504 8.007l2.59-2.59V17.76a.937.937 0 1 0 1.874 0V5.418l2.59 2.59a.934.934 0 0 0 1.326 0 .937.937 0 0 0 0-1.327l-4.19-4.19a.938.938 0 0 0-1.326 0l-4.19 4.19a.937.937 0 1 0 1.326 1.326z" fill="#000"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
|
|
2
|
+
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10"/>
|
|
3
|
+
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
.compact {
|
|
2
|
+
height: 194px;
|
|
3
|
+
border-radius: 32px;
|
|
4
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
5
|
+
background-color: #f2f2f2;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.header_Text {
|
|
9
|
+
margin-top: 140px;
|
|
10
|
+
font-size: 32px;
|
|
11
|
+
line-height: normal;
|
|
12
|
+
color: #1b1b1b;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.vector svg {
|
|
16
|
+
width: 16px;
|
|
17
|
+
height: 21.5px;
|
|
18
|
+
flex-grow: 0;
|
|
19
|
+
margin: 4.2px 10px 4.2px 0;
|
|
20
|
+
fill: #344041;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.propText {
|
|
25
|
+
height: 30px;
|
|
26
|
+
font-size: 16px;
|
|
27
|
+
letter-spacing: normal;
|
|
28
|
+
text-align: center;
|
|
29
|
+
color: #344041;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.v_share {
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.fetch_section {
|
|
37
|
+
margin-top: 90px;
|
|
38
|
+
height: 60px;
|
|
39
|
+
}
|
|
40
|
+
@media (min-width: 800px) {
|
|
41
|
+
.Pheader {
|
|
42
|
+
max-width: 1750px;
|
|
43
|
+
margin: 0 auto;
|
|
44
|
+
|
|
45
|
+
}
|
|
46
|
+
}
|
|
@@ -0,0 +1,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
|
+
|
|
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
|
+
}
|
|
@@ -0,0 +1,359 @@
|
|
|
1
|
+
.popup-overlay {
|
|
2
|
+
position: fixed; /* Fixed position to cover the whole screen */
|
|
3
|
+
top: 0;
|
|
4
|
+
left: 0;
|
|
5
|
+
right: 0;
|
|
6
|
+
bottom: 0;
|
|
7
|
+
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
|
|
8
|
+
display: flex; /* Flexbox to center the popup */
|
|
9
|
+
justify-content: center; /* Center horizontally */
|
|
10
|
+
align-items: center; /* Center vertically */
|
|
11
|
+
z-index: 2000; /* Ensure it's above other content */
|
|
12
|
+
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.shareSection {
|
|
16
|
+
height: 340px;
|
|
17
|
+
padding: 40px;
|
|
18
|
+
border-radius: 16px;
|
|
19
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
20
|
+
border: solid 1px #d7d9e3;
|
|
21
|
+
background-color: #fff;
|
|
22
|
+
|
|
23
|
+
}
|
|
24
|
+
.popUpHeader {
|
|
25
|
+
height: 48px;
|
|
26
|
+
font-size: 32px;
|
|
27
|
+
font-weight: 600;
|
|
28
|
+
color: #1b1b1b;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.closeIcon {
|
|
32
|
+
width: 16px;
|
|
33
|
+
height: 16px;
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.socialMediaIconsSection {
|
|
38
|
+
gap: 60px !important;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.socialMediaIcons {
|
|
42
|
+
width: 28px !important;
|
|
43
|
+
height: 28px !important;
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.socialMediaIconText {
|
|
48
|
+
height: 36px;
|
|
49
|
+
font-size: 13px;
|
|
50
|
+
font-weight: 500;
|
|
51
|
+
line-height: 3;
|
|
52
|
+
color: #344041;
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.popup_search-input {
|
|
57
|
+
height: 60px;
|
|
58
|
+
padding-inline-end: 190px;
|
|
59
|
+
font-size: 20px;
|
|
60
|
+
box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
61
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.popup_search-input::placeholder {
|
|
65
|
+
font-size: 20px;
|
|
66
|
+
color: rgba(140, 140, 140, 0.5);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.popup_search-input:focus {
|
|
70
|
+
outline: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.popupcustom-button {
|
|
74
|
+
height: 35px;
|
|
75
|
+
color: #000;
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
border-color: #ffb525;
|
|
78
|
+
right: 0;
|
|
79
|
+
z-index: 1;
|
|
80
|
+
background-color: #ffb525;
|
|
81
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
82
|
+
}
|
|
83
|
+
.button-text {
|
|
84
|
+
width: 115px;
|
|
85
|
+
height: 19px;
|
|
86
|
+
flex-grow: 0;
|
|
87
|
+
font-family: Inter;
|
|
88
|
+
font-size: 16px;
|
|
89
|
+
font-weight: 500;
|
|
90
|
+
font-stretch: normal;
|
|
91
|
+
font-style: normal;
|
|
92
|
+
line-height: normal;
|
|
93
|
+
letter-spacing: normal;
|
|
94
|
+
text-align: center;
|
|
95
|
+
}
|
|
96
|
+
.button_success-right {
|
|
97
|
+
width: 184px;
|
|
98
|
+
height: 43px;
|
|
99
|
+
flex-grow: 0;
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-direction: row;
|
|
102
|
+
justify-content: center;
|
|
103
|
+
align-items: center;
|
|
104
|
+
gap: 8px;
|
|
105
|
+
padding: 12px 24px;
|
|
106
|
+
border-radius: 16px;
|
|
107
|
+
border-color: #000;
|
|
108
|
+
background-color: transparent;
|
|
109
|
+
}
|
|
110
|
+
.button_success-left {
|
|
111
|
+
width: 200px;
|
|
112
|
+
height: 43px;
|
|
113
|
+
flex-grow: 0;
|
|
114
|
+
display: flex;
|
|
115
|
+
flex-direction: row;
|
|
116
|
+
justify-content: center;
|
|
117
|
+
align-items: center;
|
|
118
|
+
gap: 8px;
|
|
119
|
+
padding: 12px 24px;
|
|
120
|
+
border-radius: 16px;
|
|
121
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
122
|
+
background-color: #ffb525;
|
|
123
|
+
}
|
|
124
|
+
.shareSection-Success {
|
|
125
|
+
height: 510px;
|
|
126
|
+
padding: 40px;
|
|
127
|
+
border-radius: 16px;
|
|
128
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
129
|
+
border: solid 1px #d7d9e3;
|
|
130
|
+
background-color: #fff;
|
|
131
|
+
}
|
|
132
|
+
.shareSection-Error {
|
|
133
|
+
height: 400px;
|
|
134
|
+
padding:10px;
|
|
135
|
+
border-radius: 16px;
|
|
136
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
137
|
+
border: solid 1px #d7d9e3;
|
|
138
|
+
background-color: #fff;
|
|
139
|
+
}
|
|
140
|
+
.MessageShareSection {
|
|
141
|
+
height: 513px;
|
|
142
|
+
padding: 14px 14px;
|
|
143
|
+
border-radius: 16px;
|
|
144
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
145
|
+
border: solid 1px #d7d9e3;
|
|
146
|
+
background-color: #fff;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.popup-tags {
|
|
150
|
+
font-size: large;
|
|
151
|
+
font-weight: bold;
|
|
152
|
+
}
|
|
153
|
+
.button_icon-left {
|
|
154
|
+
width: 184px;
|
|
155
|
+
height: 43px;
|
|
156
|
+
flex-grow: 0;
|
|
157
|
+
display: flex;
|
|
158
|
+
flex-direction: row;
|
|
159
|
+
justify-content: center;
|
|
160
|
+
align-items: center;
|
|
161
|
+
gap: 8px;
|
|
162
|
+
padding: 12px 24px;
|
|
163
|
+
border-radius: 16px;
|
|
164
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
165
|
+
background-color: #ffb525;
|
|
166
|
+
}
|
|
167
|
+
.button-text {
|
|
168
|
+
width: 85px;
|
|
169
|
+
height: 19px;
|
|
170
|
+
flex-grow: 0;
|
|
171
|
+
font-family: Inter;
|
|
172
|
+
font-size: 16px;
|
|
173
|
+
font-weight: 500;
|
|
174
|
+
font-stretch: normal;
|
|
175
|
+
font-style: normal;
|
|
176
|
+
line-height: normal;
|
|
177
|
+
letter-spacing: normal;
|
|
178
|
+
text-align: center;
|
|
179
|
+
}
|
|
180
|
+
.button_icon-right {
|
|
181
|
+
width: 184px;
|
|
182
|
+
height: 43px;
|
|
183
|
+
flex-grow: 0;
|
|
184
|
+
display: flex;
|
|
185
|
+
flex-direction: row;
|
|
186
|
+
justify-content: center;
|
|
187
|
+
align-items: center;
|
|
188
|
+
gap: 8px;
|
|
189
|
+
padding: 12px 24px;
|
|
190
|
+
border-radius: 16px;
|
|
191
|
+
border-color: #000;
|
|
192
|
+
background-color: transparent;
|
|
193
|
+
}
|
|
194
|
+
.circle {
|
|
195
|
+
height: 55px;
|
|
196
|
+
width: 55px;
|
|
197
|
+
background-color: transparent;
|
|
198
|
+
border-radius: 50%;
|
|
199
|
+
border-style: solid;
|
|
200
|
+
border-color: #000;
|
|
201
|
+
border-width: 2px;
|
|
202
|
+
}
|
|
203
|
+
.Line-9, .Line-10 {
|
|
204
|
+
height: 1px;
|
|
205
|
+
flex-grow: 1;
|
|
206
|
+
background-color: rgba(140, 140, 140, 0.5);
|
|
207
|
+
max-width:23rem;
|
|
208
|
+
align-self: center;
|
|
209
|
+
align-content: center;
|
|
210
|
+
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.middle-container {
|
|
214
|
+
display: flex;
|
|
215
|
+
align-items: center;
|
|
216
|
+
justify-content: center;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.middle-text {
|
|
220
|
+
margin: 25px 25px;
|
|
221
|
+
}
|
|
222
|
+
.google-button{
|
|
223
|
+
width: 260px;
|
|
224
|
+
height: 45px;
|
|
225
|
+
flex-grow: 0;
|
|
226
|
+
display: flex;
|
|
227
|
+
flex-direction: row;
|
|
228
|
+
justify-content: center;
|
|
229
|
+
align-items: center;
|
|
230
|
+
gap: 8px;
|
|
231
|
+
padding: 12px 24px;
|
|
232
|
+
border-radius: 4px;
|
|
233
|
+
background-color: #000000;
|
|
234
|
+
background: linear-gradient(to top, #000 , #666 );
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
}
|
|
238
|
+
.Account-popup{
|
|
239
|
+
|
|
240
|
+
height: 713px;
|
|
241
|
+
padding: 10px;
|
|
242
|
+
border-radius: 16px;
|
|
243
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
244
|
+
border: solid 1px #d7d9e3;
|
|
245
|
+
background-color: #fff;
|
|
246
|
+
max-width: 1000px;
|
|
247
|
+
|
|
248
|
+
}
|
|
249
|
+
.lightertxt{
|
|
250
|
+
color: #797979;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.filter {
|
|
254
|
+
height: 343px;
|
|
255
|
+
align-self: stretch;
|
|
256
|
+
flex-grow: 0;
|
|
257
|
+
display: flex;
|
|
258
|
+
flex-direction: column;
|
|
259
|
+
gap: 2px;
|
|
260
|
+
padding: 32px;
|
|
261
|
+
border-radius: 32px;
|
|
262
|
+
box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
|
|
263
|
+
background-color: #f2f2f2;
|
|
264
|
+
}
|
|
265
|
+
.loginFilter {
|
|
266
|
+
height: 280px;
|
|
267
|
+
align-self: stretch;
|
|
268
|
+
flex-grow: 0;
|
|
269
|
+
display: flex;
|
|
270
|
+
flex-direction: column;
|
|
271
|
+
gap: 2px;
|
|
272
|
+
padding: 32px;
|
|
273
|
+
border-radius: 32px;
|
|
274
|
+
box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
|
|
275
|
+
background-color: #f2f2f2;
|
|
276
|
+
}
|
|
277
|
+
.radioLabel {
|
|
278
|
+
width: 176px;
|
|
279
|
+
height: 19px;
|
|
280
|
+
flex-grow: 0;
|
|
281
|
+
font-family: Inter;
|
|
282
|
+
font-size: 16px;
|
|
283
|
+
font-weight: normal;
|
|
284
|
+
font-stretch: normal;
|
|
285
|
+
font-style: normal;
|
|
286
|
+
line-height: normal;
|
|
287
|
+
letter-spacing: normal;
|
|
288
|
+
text-align: left;
|
|
289
|
+
color: #1b1b1b;
|
|
290
|
+
}
|
|
291
|
+
.goButton-text {
|
|
292
|
+
width: 78px;
|
|
293
|
+
height: 19px;
|
|
294
|
+
flex-grow: 0;
|
|
295
|
+
font-family: Inter;
|
|
296
|
+
font-size: 16px;
|
|
297
|
+
font-weight: 500;
|
|
298
|
+
font-stretch: normal;
|
|
299
|
+
font-style: normal;
|
|
300
|
+
line-height: normal;
|
|
301
|
+
letter-spacing: normal;
|
|
302
|
+
text-align: center;
|
|
303
|
+
color: #1b1b1b;
|
|
304
|
+
}
|
|
305
|
+
.placeholders {
|
|
306
|
+
width: 232px;
|
|
307
|
+
height: 45px;
|
|
308
|
+
flex-grow: 0;
|
|
309
|
+
display: flex;
|
|
310
|
+
flex-direction: row;
|
|
311
|
+
justify-content: flex-start;
|
|
312
|
+
align-items: center;
|
|
313
|
+
gap: 8px;
|
|
314
|
+
padding: 12px 24px;
|
|
315
|
+
border-radius: 4px;
|
|
316
|
+
background-image: linear-gradient(to top, #000 100%, #666 0%);
|
|
317
|
+
}
|
|
318
|
+
.TagW.active {
|
|
319
|
+
height: 40px;
|
|
320
|
+
flex-grow: 1;
|
|
321
|
+
display: flex;
|
|
322
|
+
flex-direction: row;
|
|
323
|
+
justify-content: center;
|
|
324
|
+
align-items: center;
|
|
325
|
+
gap: 6px;
|
|
326
|
+
padding: 0 24px;
|
|
327
|
+
border-radius: 16px;
|
|
328
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
329
|
+
background-image: linear-gradient(to top, #000 , #666);
|
|
330
|
+
color: white;
|
|
331
|
+
}
|
|
332
|
+
.Tag {
|
|
333
|
+
height: 40px;
|
|
334
|
+
flex-grow: 1;
|
|
335
|
+
display: flex;
|
|
336
|
+
flex-direction: row;
|
|
337
|
+
justify-content: center;
|
|
338
|
+
align-items: center;
|
|
339
|
+
gap: 6px;
|
|
340
|
+
padding: 0 24px;
|
|
341
|
+
border-radius: 16px;
|
|
342
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
343
|
+
background-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255,0,0,1));}
|
|
344
|
+
.TagW {
|
|
345
|
+
height: 40px;
|
|
346
|
+
flex-grow: 1;
|
|
347
|
+
display: flex;
|
|
348
|
+
flex-direction: row;
|
|
349
|
+
justify-content: center;
|
|
350
|
+
align-items: center;
|
|
351
|
+
gap: 6px;
|
|
352
|
+
padding: 0 24px;
|
|
353
|
+
border-radius: 16px;
|
|
354
|
+
border: solid 1px #000;
|
|
355
|
+
background-color: #fff;
|
|
356
|
+
color: #000;
|
|
357
|
+
|
|
358
|
+
}
|
|
359
|
+
/* */
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import React, { useRef } from "react";
|
|
2
|
+
import { toast } from "react-toastify";
|
|
3
|
+
import email from "../../../assets/Images/envelope-fill.svg";
|
|
4
|
+
import facebook from "../../../assets/Images/facebook.svg";
|
|
5
|
+
import x from "../../../assets/Images/icon_close 2.png";
|
|
6
|
+
import linkedln from "../../../assets/Images/linkedin.svg";
|
|
7
|
+
import Xtwitter from "../../../assets/Images/twitter-x.svg";
|
|
8
|
+
import whatsapp from "../../../assets/Images/whatsapp.svg";
|
|
9
|
+
import "./PopUp.css";
|
|
10
|
+
|
|
11
|
+
export default function PopUp({ onClick }) {
|
|
12
|
+
const handleClose = () => {
|
|
13
|
+
onClick();
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const urlInputRef = useRef(null);
|
|
17
|
+
|
|
18
|
+
const copyToClipboard = () => {
|
|
19
|
+
urlInputRef.current.select();
|
|
20
|
+
document.execCommand("copy");
|
|
21
|
+
toast.success("URL copied to clipboard!");
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
return (
|
|
25
|
+
<div className="popup-overlay">
|
|
26
|
+
<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">
|
|
27
|
+
<div className="end-0 top-0 position-absolute ">
|
|
28
|
+
<img
|
|
29
|
+
src={x}
|
|
30
|
+
alt="close"
|
|
31
|
+
className="closeIcon me-2"
|
|
32
|
+
onClick={handleClose}
|
|
33
|
+
/>
|
|
34
|
+
</div>
|
|
35
|
+
<div className="popUpHeader col-lg-12 d-flex justify-content-center mb-2">
|
|
36
|
+
Jetzt teilen und weitersagen!
|
|
37
|
+
</div>
|
|
38
|
+
<div className="h-25 col-lg-12 socialMediaIconsSection d-flex flex-row align-items-center justify-content-center mx-auto">
|
|
39
|
+
|
|
40
|
+
<a href="https://twitter.com/intent/tweet?url=https://www.nestiq.de&text=Nestiq" className="text-decoration-none" target="blank">
|
|
41
|
+
<div className=" flex-column d-flex align-items-center">
|
|
42
|
+
<img src={Xtwitter} alt="twitter" className="socialMediaIcons" />
|
|
43
|
+
<span className="socialMediaIconText" >Xtwitter</span>
|
|
44
|
+
</div>
|
|
45
|
+
</a>
|
|
46
|
+
|
|
47
|
+
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.nestiq.de" className="text-decoration-none" target="blank" >
|
|
48
|
+
<div className=" flex-column d-flex align-items-center">
|
|
49
|
+
<img src={facebook} alt="facebook" className="socialMediaIcons " />
|
|
50
|
+
<span className="socialMediaIconText">Facebook</span>
|
|
51
|
+
</div>
|
|
52
|
+
</a>
|
|
53
|
+
|
|
54
|
+
<a href="https://api.whatsapp.com/send?text=https://www.nestiq.de" target="blank" className="text-decoration-none">
|
|
55
|
+
<div className=" flex-column d-flex align-items-center">
|
|
56
|
+
<img src={whatsapp} alt="whatsapp" className=" socialMediaIcons" />
|
|
57
|
+
<span className="socialMediaIconText">WhatsApp</span>
|
|
58
|
+
</div>
|
|
59
|
+
</a>
|
|
60
|
+
|
|
61
|
+
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.nestiq.de" target="blank" className="text-decoration-none">
|
|
62
|
+
<div className=" flex-column d-flex align-items-center">
|
|
63
|
+
<img src={linkedln} alt="linkedin" className=" socialMediaIcons" />
|
|
64
|
+
<span className="socialMediaIconText">LinkedIn</span>
|
|
65
|
+
</div>
|
|
66
|
+
</a>
|
|
67
|
+
|
|
68
|
+
<a href="https://www.nestiq.de" target="blank" className="text-decoration-none">
|
|
69
|
+
<div className=" flex-column d-flex align-items-center">
|
|
70
|
+
<img src={email} alt="email" className=" socialMediaIcons" />
|
|
71
|
+
<span className="socialMediaIconText">E-mail</span>
|
|
72
|
+
</div>
|
|
73
|
+
</a>
|
|
74
|
+
|
|
75
|
+
</div>
|
|
76
|
+
<div className="col-10 mx-auto">
|
|
77
|
+
<div className=" row align-items-center position-relative">
|
|
78
|
+
<input
|
|
79
|
+
ref={urlInputRef}
|
|
80
|
+
type="text"
|
|
81
|
+
className="popup_search-input rounded-4 border border-0 "
|
|
82
|
+
placeholder="Enter link here"
|
|
83
|
+
value={window.location.href}
|
|
84
|
+
readOnly
|
|
85
|
+
/>
|
|
86
|
+
<button
|
|
87
|
+
onClick={copyToClipboard}
|
|
88
|
+
className="popupcustom-button border border-0 position-absolute me-2 col-lg-3 col-md-3 col-sm-3 rounded-4 fs-6"
|
|
89
|
+
type="button"
|
|
90
|
+
id="button"
|
|
91
|
+
>
|
|
92
|
+
<strong>Kopieren</strong>
|
|
93
|
+
</button>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
);
|
|
99
|
+
}
|
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";
|