function MainComponent() { const [message, setMessage] = React.useState(""); const [chatHistory, setChatHistory] = React.useState([]); const handleMessageChange = (event)=>{ setMessage(event.target.value); }; const handleSendMessage = (event)=>{ event.preventDefault(); if (message !== "") { setChatHistory([ ...chatHistory, { text: message, author: "You" } ]); setMessage(""); } }; const handleEraseChat = ()=>{ setChatHistory([]); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] mx-auto mt-10 p-5 bg-[#ffe4e1] rounded-lg shadow-md", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-bold text-xl mb-5 font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "Couples' Instant Erase Chat"), /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-auto bg-white p-4 mb-5 rounded-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, chatHistory.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 p-2 rounded-lg ${msg.author === "You" ? "bg-[#f0f0f0]" : "bg-pink-200"}`, __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, msg.author, ":"), " ", msg.text))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "space-y-5", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "p-2 border rounded-lg text-[#121212] w-full", placeholder: "Type your message here...", value: message, onChange: handleMessageChange, name: "messageInput", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#ff69b4] text-white rounded-lg font-roboto transition-colors duration-300 ease-in-out hover:bg-[#ff1493]", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Send"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "px-4 py-2 bg-[#dc143c] text-white rounded-lg font-roboto transition-colors duration-300 ease-in-out hover:bg-[#9b1b2c]", onClick: handleEraseChat, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Erase Chat")))); }