function MainComponent() { const [questions, setQuestions] = React.useState([]); const [selectedQuestion, setSelectedQuestion] = React.useState(null); const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const newQuestion = { id: Date.now(), name: formData.get("name"), content: formData.get("question"), date: new Date().toLocaleString([], { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }), answers: [] }; setQuestions([ ...questions, newQuestion ]); e.target.reset(); }; const handleAnswerSubmit = (e, questionId)=>{ e.preventDefault(); const formData = new FormData(e.target); const newAnswer = { name: formData.get("answererName"), content: formData.get("answer"), date: new Date().toLocaleString([], { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }; setQuestions(questions.map((q)=>q.id === questionId ? { ...q, answers: [ ...q.answers, newAnswer ] } : q)); e.target.reset(); }; const handleDeleteQuestion = (id)=>{ setQuestions(questions.filter((q)=>q.id !== id)); }; const handleDeleteAnswer = (questionId, answerIndex)=>{ setQuestions(questions.map((q)=>q.id === questionId ? { ...q, answers: q.answers.filter((_, i)=>i !== answerIndex) } : q)); }; const handleEditQuestion = (id, name, content)=>{ setQuestions(questions.map((q)=>q.id === id ? { ...q, name, content } : q)); }; const handleEditAnswer = (questionId, answerIndex, name, content)=>{ setQuestions(questions.map((q)=>q.id === questionId ? { ...q, answers: q.answers.map((a, i)=>i === answerIndex ? { ...a, name, content } : a) } : q)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-[#f3f4f6] p-10", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg w-full max-w-[1200px] flex", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#ecf0f1] w-[300px] p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto font-semibold mb-6 text-[#2c3e50]", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "質問リスト"), questions.map((question, index)=>/*#__PURE__*/ React.createElement("div", { key: question.id, className: "p-4 rounded-lg shadow-md bg-white mb-4 cursor-pointer", onClick: ()=>setSelectedQuestion(question.id), __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#34495e]", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, `${index + 1}. ${question.content}`)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-8", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto font-semibold mb-6 text-[#2c3e50]", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "質問箱"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "名前を入力してください...", className: "w-full mb-4 p-4 border border-gray-300 rounded-lg focus:outline-none focus:border-[#3498db] font-roboto text-[#34495e]", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "question", rows: "5", className: "w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:border-[#3498db] font-roboto text-[#34495e]", placeholder: "質問を入力してください...", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#3498db] text-white p-3 rounded-lg font-roboto mt-4 hover:bg-[#2980b9]", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "送信")), questions.map((question, index)=>/*#__PURE__*/ React.createElement("div", { key: question.id, className: "mb-6", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative p-4 rounded-lg shadow-md bg-[#ecf0f1] mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2 text-[#2c3e50]", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, `${index + 1}. ${question.name}`), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#34495e]", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, question.content), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#7f8c8d] absolute top-2 right-2", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, question.date), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-2", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteQuestion(question.id), className: "mr-4 text-[#e74c3c] font-roboto", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }, "削除"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEditQuestion(question.id, prompt('名前:', question.name), prompt('内容:', question.content)), className: "text-[#f39c12] font-roboto", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, "編集"))), (selectedQuestion === question.id || question.answers.length > 0) && /*#__PURE__*/ React.createElement(React.Fragment, null, selectedQuestion === question.id && /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>handleAnswerSubmit(e, question.id), className: "mb-4 ml-4", __source: { fileName: "", lineNumber: 102, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "answererName", placeholder: "名前を入力してください...", className: "w-full mb-2 p-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#3498db] font-roboto text-[#34495e]", __source: { fileName: "", lineNumber: 103, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "answer", rows: "2", className: "w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#3498db] font-roboto text-[#34495e]", placeholder: "回答を入力してください...", __source: { fileName: "", lineNumber: 109, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#2ecc71] text-white p-2 rounded-lg font-roboto mt-2 hover:bg-[#27ae60]", __source: { fileName: "", lineNumber: 115, columnNumber: 23 }, __self: this }, "回答送信")), question.answers.length > 0 && question.answers.map((answer, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "relative p-4 rounded-lg shadow-md bg-[#e1e8ed] mb-2", __source: { fileName: "", lineNumber: 124, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-md mb-1 text-[#2c3e50]", __source: { fileName: "", lineNumber: 125, columnNumber: 23 }, __self: this }, answer.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#34495e]", __source: { fileName: "", lineNumber: 126, columnNumber: 23 }, __self: this }, answer.content), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#7f8c8d] absolute top-2 right-2", __source: { fileName: "", lineNumber: 127, columnNumber: 23 }, __self: this }, answer.date), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-2", __source: { fileName: "", lineNumber: 128, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteAnswer(question.id, i), className: "mr-4 text-[#e74c3c] font-roboto", __source: { fileName: "", lineNumber: 129, columnNumber: 25 }, __self: this }, "削除"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEditAnswer(question.id, i, prompt('名前:', answer.name), prompt('内容:', answer.content)), className: "text-[#f39c12] font-roboto", __source: { fileName: "", lineNumber: 130, columnNumber: 25 }, __self: this }, "編集")))))))))); }