function MainComponent() { const [questionIndex, setQuestionIndex] = React.useState(0); const [answers, setAnswers] = React.useState([]); const [image, setImage] = React.useState(''); const questions = [ "ブログのタイトルは何ですか？", "メインのトピックは何ですか？", "読者に伝えたい主なメッセージは何ですか？", "最後に読者にどのような行動をとってほしいですか？", "ブログの表紙となる画像をアップロードしてください。" ]; const handleNextQuestion = (event)=>{ event.preventDefault(); const nextQuestionIndex = questionIndex + 1; if (nextQuestionIndex < questions.length - 1) { setQuestionIndex(nextQuestionIndex); } else if (nextQuestionIndex === questions.length - 1) { setQuestionIndex(nextQuestionIndex); } else { setQuestionIndex(-1); // Finished answering questions } }; const handleChange = (event)=>{ const updatedAnswers = [ ...answers ]; updatedAnswers[questionIndex] = event.target.value; setAnswers(updatedAnswers); }; const handleImageChange = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ setImage(reader.result); }; reader.readAsDataURL(file); }; const createBlogPost = ()=>{ return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f1f1f1] p-8", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, image && /*#__PURE__*/ React.createElement("img", { src: image, alt: "ブログの表紙画像", className: "w-full mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-[#000] mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, answers[0]), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg text-[#333] mb-3", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "主題: ", answers[1]), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md text-[#666] mb-6", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, answers[2]), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md text-[#666] italic", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, answers[3])); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, questionIndex >= 0 ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleNextQuestion, className: "w-[90%] max-w-md", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, questionIndex < questions.length - 1 ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("label", { htmlFor: "answer", className: "block font-roboto text-lg text-[#333] mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, questions[questionIndex]), /*#__PURE__*/ React.createElement("input", { type: "text", id: "answer", name: "answer", className: "border border-[#ccc] w-full p-2 font-roboto", value: answers[questionIndex] || '', onChange: handleChange, __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this })) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("label", { htmlFor: "image", className: "block font-roboto text-lg text-[#333] mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, questions[questionIndex]), /*#__PURE__*/ React.createElement("input", { type: "file", id: "image", name: "image", className: "border border-[#ccc] w-full p-2 font-roboto", onChange: handleImageChange, __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 bg-[#007bff] text-white font-roboto p-2 w-full", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "次へ")) : createBlogPost()); }