function MainComponent() { const [questions, setQuestions] = React.useState([ "今の気分はどうですか？", "最近考えていることは何ですか？", "その考えに至った理由は何ですか？" ]); const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const [responses, setResponses] = React.useState([]); const [thoughts, setThoughts] = React.useState(''); const handleThoughtChange = (event)=>{ setThoughts(event.target.value); }; const handleNextQuestion = ()=>{ setResponses([ ...responses, { question: questions[currentQuestionIndex], answer: thoughts } ]); setThoughts(''); if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 max-w-lg bg-white rounded-lg border border-gray-200 shadow-md", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-5 text-2xl font-medium text-gray-900", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "質問に答えて考察を深めましょう"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "userInput", className: "block mb-2 text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, questions[currentQuestionIndex]), /*#__PURE__*/ React.createElement("textarea", { id: "userInput", name: "userInput", rows: "4", className: "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500", placeholder: "ここに入力...", value: thoughts, onChange: handleThoughtChange, __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleNextQuestion, className: "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, currentQuestionIndex === questions.length - 1 ? "考察を完了する" : "次の質問へ"), /*#__PURE__*/ React.createElement("div", { className: "mt-6 space-y-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, responses.map((response, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-gray-600", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, response.question), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, response.answer)))))); }