function PrefectureDropdownMenu({ value, onChange }) { return /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded-md mb-3", name: "prefecture", value: value, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "県名を選択"), /*#__PURE__*/ React.createElement("option", { value: "宮城県", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, "宮城県"), /*#__PURE__*/ React.createElement("option", { value: "福島県", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, "福島県"), /*#__PURE__*/ React.createElement("option", { value: "山形県", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, "山形県"), /*#__PURE__*/ React.createElement("option", { value: "岩手県", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "岩手県"), /*#__PURE__*/ React.createElement("option", { value: "秋田県", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "秋田県"), /*#__PURE__*/ React.createElement("option", { value: "青森県", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, "青森県")); } function PrefectureDropdownMenuStory() { const [value, setValue] = React.useState(""); const handleChange = (event)=>{ setValue(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PrefectureDropdownMenu, { value: value, onChange: handleChange, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function MainComponent() { const [data, setData] = React.useState({ name: "", prefecture: "", solarRadiationObservationPoint: "", electricityProvider: "", plan: "", monthlyUsage: "", lifestyle: "", panelInstallation: false, fitPrice: "", fitDuration: "", postFitPrice: "", postFitDuration: "", predictedAnnualProduction: "", batteryType: "", allElectrification: false }); const handleChange = (e)=>{ const { name, value, type, checked } = e.target; setData((prevData)=>({ ...prevData, [name]: type === "checkbox" ? checked : value })); }; const miyagiPoints = [ "仙台", "駒ノ湯", "気仙沼", "川渡", "築館", "米山", "志津川", "古川", "大衡", "鹿島台", "石巻", "新川", "塩釜", "白石", "蔵王", "亘理", "丸森" ]; const fukushimaPoints = [ "福島", "郡山", "小名浜", "相馬", "茂庭", "梁川", "桧原", "喜多方", "鷲倉", "飯館", "西会津", "猪苗代", "二本松", "金山", "若松", "船引", "浪江", "只見", "川内", "南郷", "湯元", "小野新町", "広野", "田島", "白河", "石川", "東白川", "山田" ]; const handleSubmit = (e)=>{ e.preventDefault(); console.log("Form Data:", data); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f5f5f5] min-h-screen p-5", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[800px] m-auto bg-white p-5 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-center mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "太陽光発電の経済効果"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "世帯情報"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md mb-3", type: "text", name: "name", value: data.name, onChange: handleChange, placeholder: "氏名", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(PrefectureDropdownMenu, { value: data.prefecture, onChange: handleChange, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }), data.prefecture === "宮城県" && /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded-md", name: "solarRadiationObservationPoint", value: data.solarRadiationObservationPoint, onChange: handleChange, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "日射量観測地点を選択"), miyagiPoints.map((point)=>/*#__PURE__*/ React.createElement("option", { key: point, value: point, __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }, point))), data.prefecture === "福島県" && /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded-md", name: "solarRadiationObservationPoint", value: data.solarRadiationObservationPoint, onChange: handleChange, __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "日射量観測地点を選択"), fukushimaPoints.map((point)=>/*#__PURE__*/ React.createElement("option", { key: point, value: point, __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, point)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "電力情報"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md mb-3", type: "text", name: "electricityProvider", value: data.electricityProvider, onChange: handleChange, placeholder: "電力会社", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md mb-3", type: "text", name: "plan", value: data.plan, onChange: handleChange, placeholder: "料金プラン", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md mb-3", type: "text", name: "monthlyUsage", value: data.monthlyUsage, onChange: handleChange, placeholder: "1ヶ月の電気使用量", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md", type: "text", name: "lifestyle", value: data.lifestyle, onChange: handleChange, placeholder: "生活スタイル", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "太陽光パネル"), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "panelInstallation", checked: data.panelInstallation, onChange: handleChange, id: "panelInstallation", className: "mr-2", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "panelInstallation", className: "font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "太陽光パネル設置有無")), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md mb-3", type: "text", name: "fitPrice", value: data.fitPrice, onChange: handleChange, placeholder: "FIT期間中の買取単価", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md mb-3", type: "text", name: "fitDuration", value: data.fitDuration, onChange: handleChange, placeholder: "FIT期間中の年数", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md mb-3", type: "text", name: "postFitPrice", value: data.postFitPrice, onChange: handleChange, placeholder: "FIT終了後の買取単価", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md mb-3", type: "text", name: "postFitDuration", value: data.postFitDuration, onChange: handleChange, placeholder: "FIT終了後の年数", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md", type: "text", name: "predictedAnnualProduction", value: data.predictedAnnualProduction, onChange: handleChange, placeholder: "年間予測発電量", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "蓄電池"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md", type: "text", name: "batteryType", value: data.batteryType, onChange: handleChange, placeholder: "蓄電池の種類", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "オール電化"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "allElectrification", checked: data.allElectrification, onChange: handleChange, id: "allElectrification", className: "mr-2", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "allElectrification", className: "font-roboto", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "オール電化の有無"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-500 text-white rounded-md font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "送信")))); }