function MainComponent() { const [messages, setMessages] = React.useState([ { sender: "取引相手", text: "こんにちは！" }, { sender: "あなた", text: "こんにちは！" } ]); const [newMessage, setNewMessage] = React.useState(""); const handleSendMessage = ()=>{ if (newMessage.trim()) { setMessages([ ...messages, { sender: "あなた", text: newMessage } ]); setNewMessage(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f5f5f5] p-4 flex flex-row justify-between items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "取引アプリ"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#0070f3] text-white p-2 rounded", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#0070f3] text-white p-2 rounded", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Profile"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-row flex-1 overflow-y-hidden sm:flex-col", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[70%] p-4 sm:w-full", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border p-4 mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Google Map"), /*#__PURE__*/ React.createElement("iframe", { className: "w-full h-[400px] sm:h-[200px]", src: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.891143535295!2d139.6917061152532!3d35.68948778019156!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0808b0a377%3A0x38c4af5fbd16f09b!2z44CSMTAwLTAwMTMg5p2x5Lqs6YO95paw5a6_5Yy656uL5a6J77yR5LiB55uu77yX!5e0!3m2!1sja!2sjp!4v1698324800000", allowFullScreen: "", loading: "lazy", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-[30%] p-4 border-l sm:w-full sm:border-l-0", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border p-4 flex-1", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "チャット"), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[300px] p-2 sm:h-[200px]", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, messages.map((msg, idx)=>{ const msgClass = msg.sender === "あなた" ? "bg-[#d6f5d6] self-end" : "bg-[#e6e6e6]"; return /*#__PURE__*/ React.createElement("div", { key: idx, className: `p-2 rounded mb-2 ${msgClass}`, __source: { fileName: "", lineNumber: 46, columnNumber: 21 }, __self: this }, msg.sender, ": ", msg.text); })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatMessage", className: "flex-1 border p-2 rounded", placeholder: "メッセージを入力", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#0070f3] text-white p-2 rounded ml-2", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "送信"))), /*#__PURE__*/ React.createElement("div", { className: "border p-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "取引詳細"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "アイテム: Example Item"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "価格: ¥1000"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, "住所: Tokyo, Japan")))))); }