nestiq-component-library 1.0.17 → 1.0.19
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/dist/components/PropertyCard/PropertyCard.d.ts +24 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +59 -9
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +59 -8
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/PropertyCard/PropertyCard.css +268 -0
- package/src/components/PropertyCard/PropertyCard.tsx +141 -0
- package/src/components/PropertyCard/PropertyDaet.json +1210 -0
- package/src/index.tsx +2 -0
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
// import { FormattedMessage } from "react-intl";
|
|
3
|
+
// import layerIcon from "../../../assets/Images/LayersIcon.svg";
|
|
4
|
+
// import heart from "../../../assets/Images/heartIcon.svg";
|
|
5
|
+
// import locationIcon from "../../../assets/Images/locationIcon.svg";
|
|
6
|
+
import blcIconArrowRight from "../../assets/Images/blackarrow-Right.svg";
|
|
7
|
+
|
|
8
|
+
import "../PropertyCard/PropertyCard.css";
|
|
9
|
+
import noImageIcon from "../../../assets/Images/default-property.jpg";
|
|
10
|
+
// import { formatPrice } from "../../functions/util";
|
|
11
|
+
|
|
12
|
+
interface PopupProps {
|
|
13
|
+
property: {
|
|
14
|
+
city: string;
|
|
15
|
+
pictures: { contentUrl: string }[];
|
|
16
|
+
historicalProtection: boolean;
|
|
17
|
+
basement: boolean;
|
|
18
|
+
balcony: boolean;
|
|
19
|
+
terrace: boolean;
|
|
20
|
+
guestBathroom: boolean;
|
|
21
|
+
bathrooms: string;
|
|
22
|
+
usableArea: string;
|
|
23
|
+
id: string;
|
|
24
|
+
contentUrl: string;
|
|
25
|
+
rooms: string;
|
|
26
|
+
};
|
|
27
|
+
onClick: any;
|
|
28
|
+
pictureUrl: any[];
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export default function PropertyCard(props: PopupProps) {
|
|
32
|
+
const [liked, setLiked] = useState(false);
|
|
33
|
+
|
|
34
|
+
// const baseUrl = "https://api-dev.nestiq.de";
|
|
35
|
+
// const pictureUrl =
|
|
36
|
+
// props.property.pictures && props.property.pictures.length > 0
|
|
37
|
+
// ? `${baseUrl}${props.property.pictures[0].contentUrl}`
|
|
38
|
+
// : noImageIcon;
|
|
39
|
+
|
|
40
|
+
const handleLike = () => {
|
|
41
|
+
setLiked(!liked);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<div
|
|
46
|
+
key={props.property.id}
|
|
47
|
+
className="card-body me-4 mb-4 position-relative cardStyle"
|
|
48
|
+
style={{
|
|
49
|
+
backgroundImage: `url(${props.pictureUrl})`,
|
|
50
|
+
backgroundSize: "cover",
|
|
51
|
+
backgroundPosition: "center",
|
|
52
|
+
}}
|
|
53
|
+
onClick={props.onClick}
|
|
54
|
+
role="button"
|
|
55
|
+
>
|
|
56
|
+
<div className="labelTopClass position-absolute top-0 start-0 col-sm-5 col-lg-8">
|
|
57
|
+
<div className="d-flex align-items-center ms-2 mb-1 mt-2 gap-2">
|
|
58
|
+
<label className="firstLabel d-flex flex-row justify-content-center align-items-center">
|
|
59
|
+
<img
|
|
60
|
+
src={blcIconArrowRight}
|
|
61
|
+
alt="Location Icon"
|
|
62
|
+
className="layersVector"
|
|
63
|
+
/>
|
|
64
|
+
<span className="layersText">{"Grundriss"}</span>
|
|
65
|
+
</label>
|
|
66
|
+
{props.property.historicalProtection && (
|
|
67
|
+
<label className="thirdLabel d-flex flex-row justify-content-center align-items-center">
|
|
68
|
+
<span className="layersText">{"Denkmalschutz"}</span>
|
|
69
|
+
</label>
|
|
70
|
+
)}
|
|
71
|
+
|
|
72
|
+
{props.property.basement && (
|
|
73
|
+
<label className="secondLabel d-flex flex-row justify-content-center align-items-center">
|
|
74
|
+
<span className="layersText ">{"Keller"}</span>
|
|
75
|
+
</label>
|
|
76
|
+
)}
|
|
77
|
+
{props.property.balcony && (
|
|
78
|
+
<label className="secondLabel d-flex flex-row justify-content-center align-items-center">
|
|
79
|
+
<span className="layersText ">{"Balkon"}</span>
|
|
80
|
+
</label>
|
|
81
|
+
)}
|
|
82
|
+
</div>
|
|
83
|
+
<div className="d-flex align-items-center ms-2 start-0 gap-2">
|
|
84
|
+
{props.property.terrace && (
|
|
85
|
+
<label className="thirdLabel d-flex flex-row justify-content-center align-items-center ">
|
|
86
|
+
<span className="layersText">{"Terrace"}</span>
|
|
87
|
+
</label>
|
|
88
|
+
)}
|
|
89
|
+
|
|
90
|
+
{props.property.guestBathroom && (
|
|
91
|
+
<label className="fourthLabel d-flex flex-row justify-content-center align-items-center ">
|
|
92
|
+
<span className="layersText">{"Gäste-WC"}</span>
|
|
93
|
+
</label>
|
|
94
|
+
)}
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
<div className="d-flex align-items-center position-absolute top-0 end-0 p-3">
|
|
98
|
+
{/*<img*/}
|
|
99
|
+
{/* src={heart}*/}
|
|
100
|
+
{/* alt=" Heart Icon"*/}
|
|
101
|
+
{/* className={`heartVector ${liked ? "liked" : ""}`}*/}
|
|
102
|
+
{/* onClick={handleLike}*/}
|
|
103
|
+
{/*/>*/}
|
|
104
|
+
</div>
|
|
105
|
+
<div className="d-flex align-items-center mb-3 position-absolute bottom-0 start-0 p-2">
|
|
106
|
+
<span className="Price col-lg-12 col-md-12 col-sm-12 text-truncate">
|
|
107
|
+
{/* {formatPrice(property?.evaluation?.askingPrice ?? 0)} € */}
|
|
108
|
+
</span>
|
|
109
|
+
</div>
|
|
110
|
+
<div className="d-flex align-items-center position-absolute bottom-0 start-0 p-2">
|
|
111
|
+
<img src={blcIconArrowRight} alt="Location Icon" className="Vector" />
|
|
112
|
+
<span className="locationText ">{props.property.city || "N/A"}</span>
|
|
113
|
+
</div>
|
|
114
|
+
<div className="d-flex col-lg-6 col-md-6 col-sm-5 me-lg-0 me-md-0 me-sm-3 justify-content-center mb-2 position-absolute bottom-0 end-0">
|
|
115
|
+
<span className="detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end ">
|
|
116
|
+
{+props.property.rooms}
|
|
117
|
+
<br />
|
|
118
|
+
{/* <FormattedMessage id="ROOMS" /> */}
|
|
119
|
+
<span>Zimmer</span>
|
|
120
|
+
</span>
|
|
121
|
+
<span className="detail col-lg-3 col-md-3 col-sm-4 text-truncate ">
|
|
122
|
+
{+props.property.bathrooms}
|
|
123
|
+
<br />
|
|
124
|
+
{/* <FormattedMessage
|
|
125
|
+
id="BATHROOM"
|
|
126
|
+
values={{ itemCount: +props.property.bathrooms }}
|
|
127
|
+
/> */}
|
|
128
|
+
{+props.property.bathrooms}
|
|
129
|
+
<br></br>
|
|
130
|
+
<span>Bad</span>
|
|
131
|
+
</span>
|
|
132
|
+
<span className="detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3">
|
|
133
|
+
{props.property.usableArea} m²
|
|
134
|
+
<br />
|
|
135
|
+
{/* <FormattedMessage id="LIVING_SPACE" /> */}
|
|
136
|
+
<span>Wohnfläche</span>
|
|
137
|
+
</span>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
);
|
|
141
|
+
}
|