nestiq-component-library 1.1.165 → 1.1.166

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 (8) hide show
  1. package/dist/components/PropertyDetailsHeader/PropertyDetailsHeader.d.ts +7 -0
  2. package/dist/index.es.js +35 -29
  3. package/dist/index.es.js.map +1 -1
  4. package/dist/index.js +35 -29
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.css +44 -44
  8. package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +80 -61
package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.css CHANGED
@@ -1,9 +1,9 @@
1
- .compact {
1
+ .compact_cc {
2
+ padding: 32px;
2
3
  height: 194px;
3
4
  border-radius: 32px;
4
5
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
5
6
  background-color: #f2f2f2;
6
- position: relative !important;
7
7
  }
8
8
 
9
9
  .header_Text {
@@ -12,7 +12,7 @@
12
12
  line-height: normal;
13
13
  color: #1b1b1b;
14
14
  }
15
- .location{
15
+ .location {
16
16
  left: 0;
17
17
  }
18
18
  .vector svg {
@@ -24,8 +24,11 @@
24
24
  cursor: pointer;
25
25
  }
26
26
 
27
+ .textWrapper {
28
+ height: 20px;
29
+ }
30
+
27
31
  .propText {
28
- height: 30px;
29
32
  font-size: 16px;
30
33
  letter-spacing: normal;
31
34
  text-align: center;
@@ -51,44 +54,41 @@
51
54
  height: 700px;
52
55
  }
53
56
  .compact {
54
- border-radius: 32px;
55
- box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
56
- background-color: #f2f2f2;
57
- }
58
- .compact2{
59
- position: relative !important;
60
- display: flex !important;
61
- align-self: flex-start !important;
62
- margin-left: 25px;
63
- justify-content: start !important;
64
- align-items: flex-start !important;
65
-
66
- }
67
- .compact3{
68
- position: relative !important;
69
- display: flex !important;
70
- margin-left: 30px;
71
- margin-top: 10px !important;
72
- }
73
- .header_Text {
74
- margin-top: 0px;
75
-
76
- }
77
- .fetch_section {
78
- margin-top: 0px;
79
- height: 60px;
80
- }
81
- .propText {
82
- justify-content: start !important;
83
- align-self: flex-start !important;
84
- text-align: start !important;
85
-
86
- }
87
- .propText2 {
88
- justify-content: start !important;
89
- align-self: flex-start !important;
90
- text-align: start !important;
91
- font-weight: 1000;
92
- font-size: 24px;
93
- }
57
+ border-radius: 32px;
58
+ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
59
+ background-color: #f2f2f2;
60
+ }
61
+ .compact2 {
62
+ position: relative !important;
63
+ display: flex !important;
64
+ align-self: flex-start !important;
65
+ margin-left: 25px;
66
+ justify-content: start !important;
67
+ align-items: flex-start !important;
68
+ }
69
+ .compact3 {
70
+ position: relative !important;
71
+ display: flex !important;
72
+ margin-left: 30px;
73
+ margin-top: 10px !important;
74
+ }
75
+ .header_Text {
76
+ margin-top: 0px;
77
+ }
78
+ .fetch_section {
79
+ margin-top: 0px;
80
+ height: 60px;
81
+ }
82
+ .propText {
83
+ justify-content: start !important;
84
+ align-self: flex-start !important;
85
+ text-align: start !important;
86
+ }
87
+ .propText2 {
88
+ justify-content: start !important;
89
+ align-self: flex-start !important;
90
+ text-align: start !important;
91
+ font-weight: 1000;
92
+ font-size: 24px;
93
+ }
94
94
  }
package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx CHANGED
@@ -8,6 +8,7 @@ import { formatPrice, formatPropertyArea } from "../../functions/util";
8
8
 
9
9
  export interface PopupProps {
10
10
  property: {
11
+ fullAddress: string;
11
12
  city: string;
12
13
  constructedArea: string;
13
14
  rooms: string;
@@ -15,73 +16,91 @@ export interface PopupProps {
15
16
  askingPrice: number;
16
17
  };
17
18
  title: string;
19
+ translations?: {
20
+ kaufpreis?: string;
21
+ wohnflache?: string;
22
+ zimmer?: string;
23
+ grundriss?: string;
24
+ };
18
25
  }
19
26
 
20
27
  export default function PropertyDetailsHeader(props: PopupProps) {
21
28
  const [showPopUp, setShowPopUp] = useState(false);
22
29
  const area = props.property?.propertyArea;
23
-
24
- const handleOpenPopup = () => setShowPopUp(true);
25
30
 
26
- const handleClosePopup = () => setShowPopUp(false);
31
+ const handleOpenPopup = () => setShowPopUp(true);
32
+
33
+ const handleClosePopup = () => setShowPopUp(false);
34
+
35
+ const t = {
36
+ kaufpreis: props.translations?.kaufpreis || "Kaufpreis",
37
+ wohnflache: props.translations?.wohnflache || "Wohnfläche",
38
+ zimmer: props.translations?.zimmer || "Zimmer",
39
+ grundriss: props.translations?.grundriss || "Grundriss",
40
+ };
41
+
42
+ return (
43
+ <div className="compact_cc d-flex flex-column col-12 col-lg-12 mt-3 justify-content-between">
44
+ <div className="col-12 d-flex flex-row">
45
+ <div className="header_Text d-flex col-lg-11 col-md-11 mt-0">
46
+ <strong>{props.title ?? "-"}</strong>
47
+ </div>
48
+ <div className="d-flex col-lg-1 col-md-1 justify-content-end position-relative">
49
+ {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
50
+ <img
51
+ src={ShareIcon}
52
+ alt="share icon"
53
+ className="v_share me-3 position-absolute"
54
+ onClick={handleOpenPopup}
55
+ />
56
+ </div>
57
+ </div>
27
58
 
28
- return (
29
- <div className="Pheader compact d-flex flex-column flex-md-row d-flex col-12 col-lg-12 mt-5 ">
30
- <div className="header_Text d-flex col-5 col-lg-7 col-md-9 mt-4 ms-4 ">
31
- <strong>{props.title ?? "-"}</strong>
32
- </div>
33
- <div className="compact3 position-absolute header_Text text-truncate col-5 col-lg-5 col-md-5 d-flex flex-row ms-4">
34
- <img src={locationIcon} className="vector me-2" alt="location Icon" />
35
- <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
36
- {props.property.city}
37
- </div>
38
- </div>
39
- <div className="compact2 d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 me-2 mt-4">
40
- {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
41
- <img
42
- src={ShareIcon}
43
- alt="share icon"
44
- className="v_share me-3"
45
- onClick={handleOpenPopup}
46
- />
47
- </div>
48
- <div className="compact2 gap-3 gap-md-0 fetch_section d-flex align-items-center flex-column flex-md-row col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0">
49
- {props && (
50
- <div className="propText col-lg-3 col-md-3 h-100 d-flex flex-column align-items-md-center justify-content-center mt-4 mt-md-0">
51
- <span className="propText2">
52
- {formatPrice(props.property?.askingPrice ?? 0)}€
53
- </span>
54
- <span>Kaufpreis</span>
55
- </div>
56
- )}
59
+ <div className="d-flex flex-row justify-content-between">
60
+ <div className="col-6 d-flex flex-row align-items-end jsutify-content-start gap-1">
61
+ <div className="d-flex gap-1 justify-content-center">
62
+ <div className="d-flex gap-2 align-items-center">
63
+ <img src={locationIcon} className="" alt="location Icon" />
64
+ </div>
65
+ <div className="textWrapper">{props.property?.fullAddress}</div>
66
+ </div>
67
+ </div>
68
+ <div className="d-flex align-items-end gap-3 justify-content-end flex-row col-lg-6 col-md-6 col-sm-5">
69
+ {props && (
70
+ <div className="propText h-100 d-flex flex-column align-items-center justify-content-center">
71
+ <span className="">
72
+ {formatPrice(props.property?.askingPrice ?? 0)}€ <br />
73
+ </span>
74
+ <span className="textWrapper">{t.kaufpreis}</span>
75
+ </div>
76
+ )}
57
77
 
58
- {props && (
59
- <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-md-center justify-content-center flex-column">
60
- <span className="propText2">
61
- {formatPropertyArea(props.property.constructedArea) ?? 0}
62
- </span>
63
- <span>Wohnfläche</span>
64
- {/* <FormattedMessage id="LIVING_SPACE" /> */}
65
- </div>
66
- )}
67
- {props && (
68
- <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column">
69
- <span className="propText2">{props.property.rooms}</span>
70
- <span>Zimmer</span>
71
- {/* <FormattedMessage id="ROOMS" /> */}
72
- </div>
73
- )}
74
- {props && (
75
- <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column">
76
- <span className="propText2">
77
- {formatPropertyArea(area ?? 0)} m²
78
- </span>
79
- Grundstück
80
- {/* <FormattedMessage id="Grundstück" /> */}
81
- </div>
82
- )}
83
- </div>
84
- {showPopUp && <SharePopup onClick={() => handleClosePopup()} /> }
85
- </div>
86
- );
78
+ {props && (
79
+ <div className="propText h-100 d-flex flex-column align-items-center justify-content-center">
80
+ <span className="">
81
+ {formatPropertyArea(props.property.constructedArea) ?? 0}
82
+ </span>
83
+ <span className="textWrapper">{t.wohnflache}</span>
84
+ </div>
85
+ )}
86
+ {props && (
87
+ <div className="propText h-100 d-flex flex-column align-items-center justify-content-center">
88
+ <span className="">{props.property.rooms}</span>
89
+ <span className="textWrapper">{t.zimmer}</span>
90
+ </div>
91
+ )}
92
+ {/* {props && (
93
+ <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column">
94
+ <span className="">
95
+ {formatPropertyArea(area ?? 0)} m²
96
+ </span>
97
+ Grundstück
98
+ <FormattedMessage id="Grundstück" />
99
+ </div>
100
+ )} */}
101
+ </div>
102
+ </div>
103
+ {showPopUp && <SharePopup onClick={() => handleClosePopup()} />}
104
+ </div>
105
+ );
87
106
  }