function MainComponent() { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [messages, setMessages] = React.useState([]); const [message, setMessage] = React.useState(''); function handleLogin(event) { event.preventDefault(); if (username && password) { setIsLoggedIn(true); } } function handleSendMessage(event) { event.preventDefault(); if (message.trim()) { setMessages([ ...messages, { user: username, text: message } ]); setMessage(''); } } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, !isLoggedIn ? /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 space-y-6 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Login to Chat"), /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleLogin, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", value: username, onChange: (e)=>setUsername(e.target.value), required: true, className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", value: password, onChange: (e)=>setPassword(e.target.value), required: true, className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Login")))) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full max-w-2xl p-8 space-y-6 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 h-[500px] overflow-y-auto bg-gray-100 p-4 rounded-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, messages.map((msg, index)=>{ const isCurrentUser = msg.user === username; const messageClasses = isCurrentUser ? 'bg-indigo-200 text-right' : 'bg-indigo-100 text-left'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded-lg ${messageClasses}`, __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, msg.user, ": "), msg.text); })), /*#__PURE__*/ React.createElement("form", { className: "flex space-x-4", onSubmit: handleSendMessage, __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", type: "text", value: message, onChange: (e)=>setMessage(e.target.value), required: true, className: "flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Send")))); }