function MainComponent() { const [total, setTotal] = React.useState(0); const [pageCount, setPageCount] = React.useState(0); const [heavyPages, setHeavyPages] = React.useState(0); const [lightPages, setLightPages] = React.useState(0); const calculateTotal = (updatedPageCount, updatedHeavyPages, updatedLightPages)=>{ const totalAmount = updatedPageCount * 10000 + updatedHeavyPages * 5000 - updatedLightPages * 5000; setTotal(totalAmount); }; const handlePageCountIncrease = ()=>{ const newCount = pageCount + 1; setPageCount(newCount); calculateTotal(newCount, heavyPages, lightPages); }; const handlePageCountDecrease = ()=>{ const newCount = pageCount > 0 ? pageCount - 1 : 0; setPageCount(newCount); calculateTotal(newCount, heavyPages, lightPages); }; const handleHeavyPagesIncrease = ()=>{ const newCount = heavyPages + 1; setHeavyPages(newCount); calculateTotal(pageCount, newCount, lightPages); }; const handleHeavyPagesDecrease = ()=>{ const newCount = heavyPages > 0 ? heavyPages - 1 : 0; setHeavyPages(newCount); calculateTotal(pageCount, newCount, lightPages); }; const handleLightPagesIncrease = ()=>{ const newCount = lightPages + 1; setLightPages(newCount); calculateTotal(pageCount, heavyPages, newCount); }; const handleLightPagesDecrease = ()=>{ const newCount = lightPages > 0 ? lightPages - 1 : 0; setLightPages(newCount); calculateTotal(pageCount, heavyPages, newCount); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "コーディングの費用計算ツール"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handlePageCountDecrease, className: "px-3 py-1 bg-gray-200", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "-"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "pageCount", className: "w-16 text-center p-2 border", value: pageCount, readOnly: true, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handlePageCountIncrease, className: "px-3 py-1 bg-gray-200", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "+"), /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "ページ数 (10000円/ページ)")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleHeavyPagesDecrease, className: "px-3 py-1 bg-gray-200", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "-"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "heavyPage", className: "w-16 text-center p-2 border", value: heavyPages, readOnly: true, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleHeavyPagesIncrease, className: "px-3 py-1 bg-gray-200", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "+"), /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "重めの実装ページ数 (+5000円/ページ)")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleLightPagesDecrease, className: "px-3 py-1 bg-gray-200", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "-"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "lightPage", className: "w-16 text-center p-2 border", value: lightPages, readOnly: true, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleLightPagesIncrease, className: "px-3 py-1 bg-gray-200", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "+"), /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "軽めの実装ページ数 (-5000円/ページ)"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-2xl", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, "トータルの金額: ", /*#__PURE__*/ React.createElement("span", { id: "totalAmount", __source: { fileName: "", lineNumber: 90, columnNumber: 18 }, __self: this }, total, "円"))); }