function MainComponent() { const [user, setUser] = React.useState(null); const [messages, setMessages] = React.useState([]); const [inputVal, setInputVal] = React.useState(""); function handleLogin() { const mockUser = { name: "User", email: "user@example.com" }; setUser(mockUser); } function handleSend() { if (user) { const trimmedInput = inputVal.trim(); if (trimmedInput) { setMessages([ ...messages, trimmedInput ]); setInputVal(""); } } } function handleInputChange(event) { setInputVal(event.target.value); } function handleKeyPress(event) { if (event.key === 'Enter') { handleSend(); } } const loginScreen = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gradient-to-tr from-[#667eea] to-[#764ba2]", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-center text-3xl font-semibold text-white font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Welcome to ChatApp"), /*#__PURE__*/ React.createElement("button", { onClick: handleLogin, className: "w-full py-3 mb-4 text-white bg-[#4285F4] rounded-full shadow-md font-roboto focus:outline-none focus:ring-4 focus:ring-blue-300", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Sign in with Google"))); const messageList = messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center p-3 my-1 bg-white rounded-xl shadow", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "ml-2 text-sm font-roboto text-gray-800", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, message))); const chatInputArea = /*#__PURE__*/ React.createElement("div", { className: "flex w-full p-4 bg-white", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Type a message...", className: "flex-1 py-2 px-4 mx-2 border-2 border-gray-300 rounded-full font-roboto focus:outline-none focus:ring focus:border-blue-300", value: inputVal, onChange: handleInputChange, onKeyPress: handleKeyPress, name: "message-input", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSend, className: "py-2 px-4 text-white bg-[#34d399] rounded-full shadow font-roboto focus:outline-none focus:ring-4 focus:ring-teal-300 disabled:opacity-50", disabled: !user, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }))); if (!user) { return loginScreen; } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, messageList), /*#__PURE__*/ React.createElement("div", { className: "border-t-2 border-gray-300 bg-gradient-to-t from-[#e0eafc] to-[#cfdef3]", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, chatInputArea)); }