function MainComponent() { const [messages, setMessages] = React.useState([ { id: 1, text: "これは最初の質問ですか？", likes: 0, replies: [ { id: 1, text: "はい、そうです！", likes: 0 } ] }, { id: 2, text: "tailwindとReactは良い組み合わせですか？", likes: 0, replies: [] } ]); const [newMessage, setNewMessage] = React.useState(''); const [newReply, setNewReply] = React.useState(''); const [activeMessageId, setActiveMessageId] = React.useState(null); const handleAddMessage = ()=>{ const updatedMessages = [ ...messages, { id: messages.length + 1, text: newMessage, likes: 0, replies: [] } ]; setMessages(updatedMessages); setNewMessage(''); }; const handleAddReply = (messageId)=>{ const updatedMessages = messages.map((message)=>{ if (message.id === messageId) { const updatedReplies = [ ...message.replies, { id: message.replies.length + 1, text: newReply, likes: 0 } ]; return { ...message, replies: updatedReplies }; } return message; }); setMessages(updatedMessages); setNewReply(''); setActiveMessageId(null); }; const handleLike = (messageId, replyId = null)=>{ const updatedMessages = messages.map((message)=>{ if (message.id === messageId) { if (replyId === null) { return { ...message, likes: message.likes + 1 }; } else { const updatedReplies = message.replies.map((reply)=>{ if (reply.id === replyId) { return { ...reply, likes: reply.likes + 1 }; } return reply; }); return { ...message, replies: updatedReplies }; } } return message; }); setMessages(updatedMessages); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-6 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, ` .primary-color { background-color: #008000; } .secondary-color { background-color: #FFC0CB; } `), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border p-2 w-full", type: "text", placeholder: "新規メッセージ", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), name: "newMessage", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "text-white p-2 mt-2 primary-color", onClick: handleAddMessage, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "投稿")), messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: "border p-4 secondary-color", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 items-center", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/avatar-placeholder.png", alt: "ユーザーアバター", className: "w-10 h-10 rounded-full", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, message.text, " ", /*#__PURE__*/ React.createElement("span", { onClick: ()=>handleLike(message.id), __source: { fileName: "", lineNumber: 82, columnNumber: 31 }, __self: this }, "👍", message.likes))), /*#__PURE__*/ React.createElement("button", { className: "text-white p-1 mt-2 primary-color", onClick: ()=>setActiveMessageId(message.id), __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "返信"), activeMessageId === message.id && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border p-2 w-full", type: "text", placeholder: "返信を入力", value: newReply, onChange: (e)=>setNewReply(e.target.value), name: "newReply", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "text-white p-2 mt-2 primary-color", onClick: ()=>handleAddReply(message.id), __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "返信する")), message.replies.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "返信:"), message.replies.map((reply)=>/*#__PURE__*/ React.createElement("div", { key: reply.id, className: "flex gap-2 items-center pl-4", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/avatar-placeholder.png", alt: "返信ユーザーアバター", className: "w-8 h-8 rounded-full", __source: { fileName: "", lineNumber: 113, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 114, columnNumber: 19 }, __self: this }, reply.text, " ", /*#__PURE__*/ React.createElement("span", { onClick: ()=>handleLike(message.id, reply.id), __source: { fileName: "", lineNumber: 114, columnNumber: 35 }, __self: this }, "👍", reply.likes)))))))); }