function MainComponent() { const [messages, setMessages] = React.useState([ { id: 1, text: "こんにちは！", isUser: false } ]); const [message, setMessage] = React.useState(""); const handleSubmit = (e)=>{ e.preventDefault(); if (!message.trim()) return; const newMessage = { id: Date.now(), text: message, isUser: true }; setMessages([ ...messages, newMessage ]); setMessage(""); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "py-4 bg-[#00B900] text-white font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto px-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "LINE風チャットツール"))), /*#__PURE__*/ React.createElement("div", { className: "flex-auto overflow-y-scroll bg-[#E0FFD6]", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto py-4 space-y-4 px-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, messages.map((msg)=>msg.isUser ? /*#__PURE__*/ React.createElement("div", { key: msg.id, className: "flex items-start justify-end", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#00B900] p-3 rounded-tl-lg rounded-tr-lg rounded-bl-lg shadow", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-white font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 19 }, __self: this }, msg.text))) : /*#__PURE__*/ React.createElement("div", { key: msg.id, className: "flex items-end justify-start", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-3 rounded-tl-lg rounded-tr-lg rounded-br-lg shadow", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#333] font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 19 }, __self: this }, msg.text)))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex space-x-2", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: message, onChange: (e)=>setMessage(e.target.value), className: "flex-auto border rounded-lg p-2 text-sm text-[#333] font-roboto", placeholder: "メッセージを入力してください", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#00B900] text-white font-roboto py-2 px-6 rounded-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "送信")))); }