nestiq-component-library 1.1.46 → 1.1.47

package/dist/components/MessagePopup/MessagePopUp.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import "./MessagePopUp.css";
 interface PopupProps {
-    onclose: any;
-    userdata: {
+    userData: {
         firstname: any;
         lastname: String;
     };
     handleSendMessage: any;
+    onClick: any;
 }
 export default function MessagePopUp(props: PopupProps): React.JSX.Element;
 export {};

package/dist/components/NewPropertyCard/NewPropertyCard.d.ts

@@ -27,6 +27,11 @@ interface PopupProps {
     onClick: any;
     baseUrl: string;
     title: string;
+    userData: {
+        firstname: string;
+        lastname: string;
+    };
+    handleSendMessage: any;
 }
 export default function PropertyCard(props: PopupProps): React.JSX.Element;
 export {};

package/dist/index.es.js

@@ -451,6 +451,70 @@ var arrowRight = "/static/media/card-arrow-right.c60af4cbbd49f3aa.svg";
 
 var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
 
+var x = "/static/media/icon_close_2.e41bb9a4db48e048.png";
+
+var mail_icon = "/static/media/mail-icon.176f921aa16b9a3d.png";
+
+var css_248z = ".popup-overlay {\r\n  position: fixed; /* Fixed position to cover the whole screen */\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n  display: flex; /* Flexbox to center the popup */\r\n  justify-content: center; /* Center horizontally */\r\n  align-items: center; /* Center vertically */\r\n  z-index: 9998; /* Ensure it's above other content */\r\n}\r\n\r\n.MessageShareSections {\r\n  height: 550px;\r\n  padding: 10px 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.popUpHeader {\r\n  height: 48px;\r\n  font-size: 32px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n  gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n  height: 36px;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 3;\r\n  color: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n  height: 60px;\r\n  padding-inline-end: 190px;\r\n  font-size: 20px;\r\n  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n  font-size: 20px;\r\n  color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n  outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n  height: 35px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: var(--main-yellow);\r\n  right: 0;\r\n  z-index: 1;\r\n  background-color: var(--main-yellow);\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.popup-tags {\r\n  font-size: large;\r\n  font-weight: bold;\r\n}\r\n.button_icon-left {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n  width: 85px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_icon-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.circle {\r\n  height: 55px;\r\n  width: 55px;\r\n  background-color: transparent;\r\n  border-radius: 50%;\r\n  border-style: solid;\r\n  border-color: #000;\r\n  border-width: 2px;\r\n  align-content: center;\r\n  justify-content: center;\r\n  justify-items: center;\r\n  justify-self: center;\r\n}\r\n@media (min-width: 375px) and (max-width: 667px) {\r\n  .popup-overlay {\r\n    /* Fixed position to cover the whole screen */\r\n\r\n    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n    display: flex; /* Flexbox to center the popup */\r\n\r\n    z-index: 9998; /* Ensure it's above other content */\r\n  }\r\n\r\n  .MessageShareSections {\r\n    height: 650px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n    border: solid 1px #d7d9e3;\r\n    background-color: #fff;\r\n  }\r\n  .button_icon-left {\r\n    width: 90px;\r\n    height: 43px;\r\n    flex-grow: 0;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 12px 24px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  }\r\n  .button-text {\r\n    width: 85px;\r\n    height: 19px;\r\n    flex-grow: 0;\r\n    font-family: Inter;\r\n    font-size: 16px;\r\n    font-weight: 500;\r\n    font-stretch: normal;\r\n    font-style: normal;\r\n    line-height: normal;\r\n    letter-spacing: normal;\r\n    text-align: center;\r\n  }\r\n  .button_icon-right {\r\n    width: 184px;\r\n  }\r\n  .circle {\r\n    height: 55px;\r\n    width: 55px;\r\n    background-color: transparent;\r\n    border-radius: 50%;\r\n    border-style: solid;\r\n    border-color: #000;\r\n    border-width: 2px;\r\n  }\r\n  .button_icon-left {\r\n    width: 184px;\r\n  }\r\n}\r\n";
+styleInject(css_248z);
+
+function MessagePopUp(props) {
+    var _a, _b;
+    var _c = useState(), showMessagePopUp = _c[0]; _c[1];
+    var _d = useState(false); _d[0]; _d[1];
+    var _e = useState(false); _e[0]; _e[1];
+    var _f = useState(""), themeId = _f[0], setThemeId = _f[1];
+    var _g = useState(""), subject = _g[0], setSubject = _g[1];
+    var _h = useState(""), messageText = _h[0], setMessageText = _h[1];
+    var _j = useState(""); _j[0]; var setFirstName = _j[1];
+    var _k = useState(""), lastName = _k[0], setLastName = _k[1];
+    var _l = useState([]), themesList = _l[0]; _l[1];
+    var handleClose = props.onClick;
+    return (React.createElement("div", null, showMessagePopUp && (React.createElement("div", { className: "popup-overlay" },
+        React.createElement("div", { className: "MessageShareSections d-flex flex-column  col-10 col-lg-7" },
+            React.createElement("img", { src: x, alt: "close", className: "closeIcon d-flex flex-column align-self-end", onClick: handleClose }),
+            React.createElement("div", { className: "" },
+                React.createElement("div", { className: "d-flex ms-md-5 mb-4" },
+                    React.createElement("div", { className: "circle align-self-center ms-md-2  me-4" },
+                        React.createElement("img", { src: mail_icon, alt: "email", className: "align-self-center", style: {
+                                alignSelf: "center",
+                                justifyContent: "center",
+                                margin: "14px",
+                                width: "25px",
+                                height: "20px",
+                            } })),
+                    React.createElement("div", { className: "popUpHeader d-flex flex-column  text-wrap mb-md-1 " },
+                        "Nachricht senden ", (_a = props.userData) === null || _a === void 0 ? void 0 :
+                        _a.firstname,
+                        " ", (_b = props.userData) === null || _b === void 0 ? void 0 :
+                        _b.lastname)),
+                React.createElement("div", { className: "d-flex flex-md-row  flex-column ms-md-5  mt-md-0   " },
+                    React.createElement("div", { className: "d-flex flex-column mt-md-0 mt-4  col me-4 w-100 align-self-start justify-content-start" },
+                        React.createElement("span", { className: "popup-tags mb-2" }, "Betreff:*"),
+                        React.createElement("div", null,
+                            React.createElement("select", { name: "theme", id: "theme", className: "mb-md-4 col-md-11 col-12", style: { height: "42px" }, value: themeId, onChange: function (e) { return setThemeId(e.target.value); } },
+                                React.createElement("option", { value: "" }, "Select a theme"),
+                                themesList.map(function (theme) { return (React.createElement("option", { key: theme.id, value: theme.id }, theme.name)); })))),
+                    React.createElement("div", { className: "d-flex flex-column mt-md-4 col me-4 w-100" },
+                        React.createElement("div", null),
+                        React.createElement("textarea", { className: "popup_textarea col-12 col-md-10  mb-md-0 mt-2 ", placeholder: "Betreff deiner Nachricht", style: { height: "42px" }, value: subject, onChange: function (e) { return setSubject(e.target.value); } }))),
+                React.createElement("div", { className: "d-flex flex-column col ms-md-5 me-md-4" },
+                    React.createElement("span", { className: "popup-tags mb-2 " }, "Deine Nachricht:*"),
+                    React.createElement("textarea", { className: "popup_textarea mb-md-4 col-md-11 col-12 ", placeholder: "Deine Nachricht hier...", value: messageText, onChange: function (e) { return setMessageText(e.target.value); } })),
+                React.createElement("div", { className: "d-flex flex-md-row flex-column ms-md-5 " },
+                    React.createElement("div", { className: "d-flex flex-column  col me-4 w-100" },
+                        React.createElement("span", { className: "popup-tags mb-2" }, "Vorname:"),
+                        React.createElement("input", { className: "popup_textarea mb-md-4  col-12 col-md-11", placeholder: "Dein Vorname", type: "text", value: props === null || props === void 0 ? void 0 : props.userData.firstname, onChange: function (e) { return setFirstName(e.target.value); }, style: { height: "42px" } })),
+                    React.createElement("div", { className: "d-flex flex-column me-4 w-100 col " },
+                        React.createElement("span", { className: "popup-tags mb-2" }, "Nachname:"),
+                        React.createElement("input", { className: "popup_textarea col-12 mb-4 col-md-10", placeholder: "Dein Nachname", type: "text", value: lastName, onChange: function (e) { return setLastName(e.target.value); }, style: { height: "42px" } }))),
+                React.createElement("div", { className: "d-flex gap-md-3 gap-3 flex-md-row flex-column align-self-center justify-content-center mb-4 mt-md-2" },
+                    React.createElement("button", { className: "main_button border-0 rounded-4 align-self-center ", type: "button", id: "button", onClick: props.handleSendMessage },
+                        React.createElement("strong", null, "Nachricht senden")),
+                    React.createElement("button", { className: "button_icon-right border-1 col-sm-3 align-self-center" },
+                        React.createElement("strong", null, "Abbrechen")))))))));
+}
+
 function PropertyCard(props) {
     var _a, _b, _c, _d, _e, _f, _g;
     var _h = useState(false); _h[0]; _h[1];
@@ -458,7 +522,7 @@ function PropertyCard(props) {
     var _k = useState(0), currentImageIndex = _k[0], setCurrentImageIndex = _k[1];
     var imageListRef = useRef(null);
     var _l = useState(false), floorPlan = _l[0], setFloorPlan = _l[1];
-    var _m = useState(false); _m[0]; var setMessagPopUp = _m[1];
+    var _m = useState(false), messagePopUp = _m[0], setMessagPopUp = _m[1];
     var _o = useState(false), sharePopUp = _o[0], setSharePopUp = _o[1];
     var pictureUrls = ((_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.pictures) === null || _b === void 0 ? void 0 : _b.length) > 0
         ? props.property.pictures.map(function (picture) { return "".concat(props.baseUrl).concat(picture.contentUrl); })
@@ -576,73 +640,10 @@ function PropertyCard(props) {
                     React.createElement("button", { className: "kontactbutton text-light ", onClick: handleMessagPopUp, role: "button" },
                         React.createElement("span", { className: "kontact-button-text" }, "Kontakt aufnehmen "))))),
         floorPlan && (React.createElement(FloorPlanPopup, { contentUrl: ((_g = props.property.pictures[0]) === null || _g === void 0 ? void 0 : _g.contentUrl) || noImageIcon, onCloseClick: function () { return setFloorPlan(false); } })),
+        messagePopUp && (React.createElement(MessagePopUp, { onClick: function () { return setMessagPopUp(false); }, userData: props.userData, handleSendMessage: props.handleSendMessage })),
         sharePopUp && React.createElement(SharePopup, { onClick: function () { return setSharePopUp(false); } })));
 }
 
-var x = "/static/media/icon_close_2.e41bb9a4db48e048.png";
-
-var mail_icon = "/static/media/mail-icon.176f921aa16b9a3d.png";
-
-var css_248z = ".popup-overlay {\r\n  position: fixed; /* Fixed position to cover the whole screen */\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n  display: flex; /* Flexbox to center the popup */\r\n  justify-content: center; /* Center horizontally */\r\n  align-items: center; /* Center vertically */\r\n  z-index: 9998; /* Ensure it's above other content */\r\n}\r\n\r\n.MessageShareSections {\r\n  height: 550px;\r\n  padding: 10px 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.popUpHeader {\r\n  height: 48px;\r\n  font-size: 32px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n  gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n  height: 36px;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 3;\r\n  color: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n  height: 60px;\r\n  padding-inline-end: 190px;\r\n  font-size: 20px;\r\n  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n  font-size: 20px;\r\n  color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n  outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n  height: 35px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: var(--main-yellow);\r\n  right: 0;\r\n  z-index: 1;\r\n  background-color: var(--main-yellow);\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.popup-tags {\r\n  font-size: large;\r\n  font-weight: bold;\r\n}\r\n.button_icon-left {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n  width: 85px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_icon-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.circle {\r\n  height: 55px;\r\n  width: 55px;\r\n  background-color: transparent;\r\n  border-radius: 50%;\r\n  border-style: solid;\r\n  border-color: #000;\r\n  border-width: 2px;\r\n  align-content: center;\r\n  justify-content: center;\r\n  justify-items: center;\r\n  justify-self: center;\r\n}\r\n@media (min-width: 375px) and (max-width: 667px) {\r\n  .popup-overlay {\r\n    /* Fixed position to cover the whole screen */\r\n\r\n    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n    display: flex; /* Flexbox to center the popup */\r\n\r\n    z-index: 9998; /* Ensure it's above other content */\r\n  }\r\n\r\n  .MessageShareSections {\r\n    height: 650px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n    border: solid 1px #d7d9e3;\r\n    background-color: #fff;\r\n  }\r\n  .button_icon-left {\r\n    width: 90px;\r\n    height: 43px;\r\n    flex-grow: 0;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 12px 24px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  }\r\n  .button-text {\r\n    width: 85px;\r\n    height: 19px;\r\n    flex-grow: 0;\r\n    font-family: Inter;\r\n    font-size: 16px;\r\n    font-weight: 500;\r\n    font-stretch: normal;\r\n    font-style: normal;\r\n    line-height: normal;\r\n    letter-spacing: normal;\r\n    text-align: center;\r\n  }\r\n  .button_icon-right {\r\n    width: 184px;\r\n  }\r\n  .circle {\r\n    height: 55px;\r\n    width: 55px;\r\n    background-color: transparent;\r\n    border-radius: 50%;\r\n    border-style: solid;\r\n    border-color: #000;\r\n    border-width: 2px;\r\n  }\r\n  .button_icon-left {\r\n    width: 184px;\r\n  }\r\n}\r\n";
-styleInject(css_248z);
-
-function MessagePopUp(props) {
-    var _a, _b;
-    var _c = useState(), showMessagePopUp = _c[0]; _c[1];
-    var _d = useState(false); _d[0]; _d[1];
-    var _e = useState(false); _e[0]; _e[1];
-    var _f = useState(""), themeId = _f[0], setThemeId = _f[1];
-    var _g = useState(""), subject = _g[0], setSubject = _g[1];
-    var _h = useState(""), messageText = _h[0], setMessageText = _h[1];
-    var _j = useState(""); _j[0]; var setFirstName = _j[1];
-    var _k = useState(""), lastName = _k[0], setLastName = _k[1];
-    var _l = useState([]), themesList = _l[0]; _l[1];
-    var handleClose = props.onclose;
-    return (React.createElement("div", null, showMessagePopUp && (React.createElement("div", { className: "popup-overlay" },
-        React.createElement("div", { className: "MessageShareSections d-flex flex-column  col-10 col-lg-7" },
-            React.createElement("img", { src: x, alt: "close", className: "closeIcon d-flex flex-column align-self-end", onClick: handleClose }),
-            React.createElement("div", { className: "" },
-                React.createElement("div", { className: "d-flex ms-md-5 mb-4" },
-                    React.createElement("div", { className: "circle align-self-center ms-md-2  me-4" },
-                        React.createElement("img", { src: mail_icon, alt: "email", className: "align-self-center", style: {
-                                alignSelf: "center",
-                                justifyContent: "center",
-                                margin: "14px",
-                                width: "25px",
-                                height: "20px",
-                            } })),
-                    React.createElement("div", { className: "popUpHeader d-flex flex-column  text-wrap mb-md-1 " },
-                        "Nachricht senden ", (_a = props.userdata) === null || _a === void 0 ? void 0 :
-                        _a.firstname,
-                        " ", (_b = props.userdata) === null || _b === void 0 ? void 0 :
-                        _b.lastname)),
-                React.createElement("div", { className: "d-flex flex-md-row  flex-column ms-md-5  mt-md-0   " },
-                    React.createElement("div", { className: "d-flex flex-column mt-md-0 mt-4  col me-4 w-100 align-self-start justify-content-start" },
-                        React.createElement("span", { className: "popup-tags mb-2" }, "Betreff:*"),
-                        React.createElement("div", null,
-                            React.createElement("select", { name: "theme", id: "theme", className: "mb-md-4 col-md-11 col-12", style: { height: "42px" }, value: themeId, onChange: function (e) { return setThemeId(e.target.value); } },
-                                React.createElement("option", { value: "" }, "Select a theme"),
-                                themesList.map(function (theme) { return (React.createElement("option", { key: theme.id, value: theme.id }, theme.name)); })))),
-                    React.createElement("div", { className: "d-flex flex-column mt-md-4 col me-4 w-100" },
-                        React.createElement("div", null),
-                        React.createElement("textarea", { className: "popup_textarea col-12 col-md-10  mb-md-0 mt-2 ", placeholder: "Betreff deiner Nachricht", style: { height: "42px" }, value: subject, onChange: function (e) { return setSubject(e.target.value); } }))),
-                React.createElement("div", { className: "d-flex flex-column col ms-md-5 me-md-4" },
-                    React.createElement("span", { className: "popup-tags mb-2 " }, "Deine Nachricht:*"),
-                    React.createElement("textarea", { className: "popup_textarea mb-md-4 col-md-11 col-12 ", placeholder: "Deine Nachricht hier...", value: messageText, onChange: function (e) { return setMessageText(e.target.value); } })),
-                React.createElement("div", { className: "d-flex flex-md-row flex-column ms-md-5 " },
-                    React.createElement("div", { className: "d-flex flex-column  col me-4 w-100" },
-                        React.createElement("span", { className: "popup-tags mb-2" }, "Vorname:"),
-                        React.createElement("input", { className: "popup_textarea mb-md-4  col-12 col-md-11", placeholder: "Dein Vorname", type: "text", value: props === null || props === void 0 ? void 0 : props.userdata.firstname, onChange: function (e) { return setFirstName(e.target.value); }, style: { height: "42px" } })),
-                    React.createElement("div", { className: "d-flex flex-column me-4 w-100 col " },
-                        React.createElement("span", { className: "popup-tags mb-2" }, "Nachname:"),
-                        React.createElement("input", { className: "popup_textarea col-12 mb-4 col-md-10", placeholder: "Dein Nachname", type: "text", value: lastName, onChange: function (e) { return setLastName(e.target.value); }, style: { height: "42px" } }))),
-                React.createElement("div", { className: "d-flex gap-md-3 gap-3 flex-md-row flex-column align-self-center justify-content-center mb-4 mt-md-2" },
-                    React.createElement("button", { className: "main_button border-0 rounded-4 align-self-center ", type: "button", id: "button", onClick: props.handleSendMessage },
-                        React.createElement("strong", null, "Nachricht senden")),
-                    React.createElement("button", { className: "button_icon-right border-1 col-sm-3 align-self-center" },
-                        React.createElement("strong", null, "Abbrechen")))))))));
-}
-
 // Utility function to show a toast
 var showToast = function (message, type) {
     if (type === void 0) { type = "info"; }