function MainComponent() { const [page, setPage] = React.useState(1); const [formData, setFormData] = React.useState({ schoolName: "", grade: "", className: "", studentName: "", products: [] }); const handleNext = ()=>{ setPage((prev)=>prev + 1); }; const handlePrev = ()=>{ setPage((prev)=>prev - 1); }; const handleChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const handleProductChange = (index, field, value)=>{ const updatedProducts = [ ...formData.products ]; updatedProducts[index] = { ...updatedProducts[index], [field]: value }; setFormData({ ...formData, products: updatedProducts }); }; const addProduct = ()=>{ if (formData.products.length < 10) { setFormData({ ...formData, products: [ ...formData.products, { maker: "", productName: "", price: "", quantity: "", term: "" } ] }); } }; const removeProduct = ()=>{ if (formData.products.length > 0) { setFormData({ ...formData, products: formData.products.slice(0, -1) }); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, page === 1 && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-8 w-full max-w-[500px] text-center", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "株式会社荻原書籍"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "担当　手嶋亮太"), /*#__PURE__*/ React.createElement("button", { className: "mt-8 bg-blue-500 text-white py-2 px-4 rounded-md font-roboto", onClick: handleNext, __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "次のページへ")), page === 2 && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-8 w-full max-w-[500px]", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "学校名"), /*#__PURE__*/ React.createElement("select", { name: "schoolName", value: formData.schoolName, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, [ "杵築市立杵築小学校", "杵築市立八坂小学校", "杵築市立東小学校", "日出町立日出小学校", "日出町立川崎小学校", "日出町立藤原小学校", "日出町立大神小学校", "日出町立豊岡小学校" ].map((school)=>/*#__PURE__*/ React.createElement("option", { key: school, value: school, __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, school)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "学年"), /*#__PURE__*/ React.createElement("select", { name: "grade", value: formData.grade, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, [ "1", "2", "3", "4", "5", "6" ].map((grade)=>/*#__PURE__*/ React.createElement("option", { key: grade, value: grade, __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, grade)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "クラス"), /*#__PURE__*/ React.createElement("input", { name: "className", value: formData.className, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { name: "studentName", value: formData.studentName, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white py-2 px-4 rounded-md font-roboto", onClick: handlePrev, __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "前のページに戻る"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded-md font-roboto", onClick: handleNext, __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, "次のページへ"))), page === 3 && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-8 w-full max-w-[500px]", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, formData.products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, "メーカー名"), /*#__PURE__*/ React.createElement("select", { value: product.maker, onChange: (e)=>handleProductChange(index, "maker", e.target.value), className: "w-full p-2 border border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, [ "青葉", "新学", "大分図書", "不明" ].map((maker)=>/*#__PURE__*/ React.createElement("option", { key: maker, value: maker, __source: { fileName: "", lineNumber: 164, columnNumber: 21 }, __self: this }, maker)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, "商品名"), /*#__PURE__*/ React.createElement("input", { value: product.productName, onChange: (e)=>handleProductChange(index, "productName", e.target.value), className: "w-full p-2 border border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 181, columnNumber: 17 }, __self: this }, "金額"), /*#__PURE__*/ React.createElement("input", { value: product.price, onChange: (e)=>handleProductChange(index, "price", e.target.value), className: "w-full p-2 border border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }, "注文数"), /*#__PURE__*/ React.createElement("input", { value: product.quantity, onChange: (e)=>handleProductChange(index, "quantity", e.target.value), className: "w-full p-2 border border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this }, "学期"), /*#__PURE__*/ React.createElement("select", { value: product.term, onChange: (e)=>handleProductChange(index, "term", e.target.value), className: "w-full p-2 border border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 202, columnNumber: 17 }, __self: this }, [ "1学期", "前期", "年間" ].map((term)=>/*#__PURE__*/ React.createElement("option", { key: term, value: term, __source: { fileName: "", lineNumber: 210, columnNumber: 21 }, __self: this }, term)))))), formData.products.length < 10 && /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-2 px-4 rounded-md mb-4 font-roboto", onClick: addProduct, __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, "注文を追加"), formData.products.length > 0 && /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white py-2 px-4 rounded-md mb-4 font-roboto", onClick: removeProduct, __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, "注文を削除"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 237, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white py-2 px-4 rounded-md font-roboto", onClick: handlePrev, __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, "前のページに戻る"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded-md font-roboto", onClick: handleNext, __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, "次のページへ"))), page === 4 && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-8 w-full max-w-[500px]", __source: { fileName: "", lineNumber: 255, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border border-gray-500 p-4 mb-6", __source: { fileName: "", lineNumber: 256, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 257, columnNumber: 13 }, __self: this }, "確認"), /*#__PURE__*/ React.createElement("p", { className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, "学校名: ", formData.schoolName), /*#__PURE__*/ React.createElement("p", { className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 259, columnNumber: 13 }, __self: this }, "学年: ", formData.grade), /*#__PURE__*/ React.createElement("p", { className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 260, columnNumber: 13 }, __self: this }, "クラス: ", formData.className), /*#__PURE__*/ React.createElement("p", { className: "mb-4 font-roboto", __source: { fileName: "", lineNumber: 261, columnNumber: 13 }, __self: this }, "名前: ", formData.studentName), formData.products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, "メーカー名: ", product.maker), /*#__PURE__*/ React.createElement("p", { className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 265, columnNumber: 17 }, __self: this }, "商品名: ", product.productName), /*#__PURE__*/ React.createElement("p", { className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 266, columnNumber: 17 }, __self: this }, "金額: ", product.price), /*#__PURE__*/ React.createElement("p", { className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 267, columnNumber: 17 }, __self: this }, "学期: ", product.term), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 268, columnNumber: 17 }, __self: this }, "注文数: ", product.quantity)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 273, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white py-2 px-4 rounded-md font-roboto", onClick: handlePrev, __source: { fileName: "", lineNumber: 274, columnNumber: 13 }, __self: this }, "前のページに戻る"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-2 px-4 rounded-md font-roboto", __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, "確定")))); }