function MainComponent() { const [messages, setMessages] = React.useState([ { id: 1, text: "こんにちわ！", sender: "self" }, { id: 2, text: "こんにちわ、元気ですか？", sender: "other" } ]); const [messageInput, setMessageInput] = React.useState(""); const handleSendMessage = ()=>{ if (messageInput.trim() !== "") { const newMessage = { id: messages.length + 1, text: messageInput, sender: "self" }; setMessages([ ...messages, newMessage ]); setMessageInput(""); } }; const handleChange = (e)=>{ setMessageInput(e.target.value); }; const handleKeyPress = (e)=>{ if (e.key === "Enter") { handleSendMessage(); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#00b900] min-h-screen min-w-full flex justify-center items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-[90%] max-w-[400px] rounded-lg shadow-lg flex flex-col", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 flex justify-between items-center border-b border-gray-200", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "LINE風チャット"), /*#__PURE__*/ React.createElement("button", { className: "text-[#00b900]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 35, columnNumber: 46 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `my-2 flex justify-${message.sender === "self" ? "end" : "start"}`, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-sm rounded-lg py-1 px-2 max-w-[70%] ${message.sender === "self" ? "bg-[#00b900] text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, message.text)))), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 flex justify-between items-center border-t border-gray-200", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: messageInput, onChange: handleChange, onKeyPress: handleKeyPress, placeholder: "メッセージを入力...", className: "border border-gray-300 rounded-full py-2 px-4 flex-1", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 text-[#00b900]", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 48, columnNumber: 79 }, __self: this }))))); }