function MainComponent() { const [message, setMessage] = React.useState(""); const [receivedMessages, setReceivedMessages] = React.useState([]); const [username, setUsername] = React.useState(""); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const sendMessage = (e)=>{ e.preventDefault(); const newMessage = { id: Date.now(), text: message, user: username }; setReceivedMessages([ ...receivedMessages, newMessage ]); setMessage(""); }; const login = (e)=>{ e.preventDefault(); setIsLoggedIn(true); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F4F8]", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, !isLoggedIn ? /*#__PURE__*/ React.createElement("div", { className: "shadow-lg rounded-lg bg-white w-full max-w-xs p-8", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: login, __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-semibold mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", value: username, onChange: (e)=>setUsername(e.target.value), __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "ログイン")))) : /*#__PURE__*/ React.createElement("div", { className: "p-4 shadow-lg rounded-lg bg-white w-full max-w-md", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: sendMessage, className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border-b border-gray-300", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "メッセージを入力...", className: "appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none", value: message, onChange: (e)=>setMessage(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex-shrink-0 bg-blue-500 hover:bg-blue-700 border-blue-500 hover:border-blue-700 text-sm border-4 text-white py-1 px-2 rounded", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "送信"))), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto h-[300px]", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, receivedMessages.map((msg)=>/*#__PURE__*/ React.createElement("div", { key: msg.id, className: "p-2 rounded-lg bg-gray-200 my-2", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, `${msg.user}: ${msg.text}`))))); }