function MainComponent() { const [area, setArea] = React.useState(0); const [unitPrice, setUnitPrice] = React.useState(0); const [optionPrice, setOptionPrice] = React.useState(0); const [total, setTotal] = React.useState(0); const handleCalculation = ()=>{ const basePrice = area * unitPrice; const totalPrice = basePrice + optionPrice; setTotal(totalPrice); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#f5f5f5] font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "リフォーム見積りツール"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "平米数"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "area", className: "w-full p-2 border border-gray-300 rounded-md", onChange: (e)=>setArea(Number(e.target.value)), __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "単価 (円)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "unitPrice", className: "w-full p-2 border border-gray-300 rounded-md", onChange: (e)=>setUnitPrice(Number(e.target.value)), __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "オプション"), /*#__PURE__*/ React.createElement("select", { name: "option", className: "w-full p-2 border border-gray-300 rounded-md", onChange: (e)=>setOptionPrice(Number(e.target.value)), __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "0", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "なし (0円)"), /*#__PURE__*/ React.createElement("option", { value: "5000", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "カーポート (5000円)"), /*#__PURE__*/ React.createElement("option", { value: "10000", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "2階建て (10000円)"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full p-2 bg-blue-500 text-white rounded-md", onClick: handleCalculation, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "見積りを計算する")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 bg-white border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "合計金額: ", /*#__PURE__*/ React.createElement("span", { id: "totalAmount", __source: { fileName: "", lineNumber: 57, columnNumber: 41 }, __self: this }, total), " 円")))); }

リフォーム見積りツール

合計金額: 0 円