function MainComponent() { const [tatami, setTatami] = React.useState(''); const [shoji, setShoji] = React.useState(''); const [fusuma, setFusuma] = React.useState(''); const [paintingArea, setPaintingArea] = React.useState(''); const [roomSize, setRoomSize] = React.useState(''); const [flooringType, setFlooringType] = React.useState(''); const [totalCost, setTotalCost] = React.useState(null); const tatamiCost = 3000; const shojiCost = 1700; const fusumaCost = 3000; const paintingCosts = { 20: 600000, 25: 700000, 30: 800000, 40: 980000, 45: 1100000, 50: 1200000 }; const crossInstallationCost = { 4.5: 33000, 6: 33000, 7: 37000, 8: 40000 }; const flooringOverlayCost = { 4.5: 75000, 6: 75000, 7: 87000, 8: 100000 }; const flooringReplacementCost = { 4.5: 100000, 6: 100000, 7: 115000 }; const calculateCost = ()=>{ let cost = Number(tatami) * tatamiCost + Number(shoji) * shojiCost + Number(fusuma) * fusumaCost; const paintedArea = paintingCosts[paintingArea]; if (paintedArea) { cost += paintedArea; } const roomInstallationCost = crossInstallationCost[roomSize]; if (roomInstallationCost) { cost += roomInstallationCost; } if (flooringType === 'overlay') { const overlayCost = flooringOverlayCost[roomSize]; if (overlayCost) { cost += overlayCost; } } else if (flooringType === 'replacement') { const replacementCost = flooringReplacementCost[roomSize]; if (replacementCost) { cost += replacementCost; } } setTotalCost(cost); }; const clearAll = ()=>{ setTatami(''); setShoji(''); setFusuma(''); setPaintingArea(''); setRoomSize(''); setFlooringType(''); setTotalCost(null); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f5f5f5] min-h-screen flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-[#333] mb-10 font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, "一戸建てリフォーム費用計算"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-[400px] bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid gap-4 mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "tatami", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "畳表替え"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "number", id: "tatami", name: "tatami", placeholder: "畳数", value: tatami, onChange: (e)=>setTatami(e.target.value), __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "shoji", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "障子数"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "number", id: "shoji", name: "shoji", placeholder: "障子数", value: shoji, onChange: (e)=>setShoji(e.target.value), __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "fusuma", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "襖数"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "number", id: "fusuma", name: "fusuma", placeholder: "襖数", value: fusuma, onChange: (e)=>setFusuma(e.target.value), __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "paintingArea", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "外壁塗装面積(坪)"), /*#__PURE__*/ React.createElement("select", { className: "shadow border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "paintingArea", name: "paintingArea", value: paintingArea, onChange: (e)=>setPaintingArea(e.target.value), __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "20", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "20坪"), /*#__PURE__*/ React.createElement("option", { value: "25", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "25坪"), /*#__PURE__*/ React.createElement("option", { value: "30", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "30坪"), /*#__PURE__*/ React.createElement("option", { value: "40", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, "40坪"), /*#__PURE__*/ React.createElement("option", { value: "45", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, "45坪"), /*#__PURE__*/ React.createElement("option", { value: "50", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "50坪"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "roomSize", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "部屋のサイズ(畳)"), /*#__PURE__*/ React.createElement("select", { className: "shadow border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "roomSize", name: "roomSize", value: roomSize, onChange: (e)=>setRoomSize(e.target.value), __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "4.5", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, "4.5畳"), /*#__PURE__*/ React.createElement("option", { value: "6", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, "6畳"), /*#__PURE__*/ React.createElement("option", { value: "7", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, "7畳"), /*#__PURE__*/ React.createElement("option", { value: "8", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, "8畳"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "flooringType", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "フローリング施工タイプ"), /*#__PURE__*/ React.createElement("select", { className: "shadow border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "flooringType", name: "flooringType", value: flooringType, onChange: (e)=>setFlooringType(e.target.value), __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "overlay", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, "重ね張り"), /*#__PURE__*/ React.createElement("option", { value: "replacement", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, "張替え")))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", type: "button", onClick: calculateCost, __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, "計算する"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", type: "button", onClick: clearAll, __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, "全てクリア")), totalCost && /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center font-roboto", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "総費用: ", /*#__PURE__*/ React.createElement("span", { className: "text-green-500", __source: { fileName: "", lineNumber: 145, columnNumber: 55 }, __self: this }, totalCost.toLocaleString(), " 円"))))); }