function Component({ id, name, checked, onChange }) { return /*#__PURE__*/ React.createElement("input", { id: id, name: name, type: "checkbox", checked: checked, onChange: onChange, className: "h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ComponentStory() { const [campaign1650, setCampaign1650] = React.useState(false); const handleCampaignChange = ()=>{ setCampaign1650(!campaign1650); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { id: "campaign1650", name: "campaign1650", checked: campaign1650, onChange: handleCampaignChange, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent() { const [joinMonth, setJoinMonth] = React.useState(''); const [startMonth, setStartMonth] = React.useState(''); const [attribute, setAttribute] = React.useState({ css_asahi: false, sumitomo_meian_1to8: false, sumitomo_meian_9to12: false }); const [campaign, setCampaign] = React.useState({ campaign1650: false, campaign2200: false }); const months = [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ]; const handleAttributeChange = (e)=>{ setAttribute({ ...attribute, [e.target.name]: e.target.checked }); }; const handleCampaignChange = (e)=>{ setCampaign({ ...campaign, [e.target.name]: e.target.checked }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-purple-400 to-indigo-600 py-12 px-4 sm:px-6 lg:px-8 font-crimson-text", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900 mb-6", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "料金引き落とし予定"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "入会月"), /*#__PURE__*/ React.createElement("select", { value: joinMonth, onChange: (e)=>setJoinMonth(e.target.value), className: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", name: "joinMonth", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "選択してください"), months.map((month)=>/*#__PURE__*/ React.createElement("option", { key: month, value: month, __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, month)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "開始月"), /*#__PURE__*/ React.createElement("select", { value: startMonth, onChange: (e)=>setStartMonth(e.target.value), className: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", name: "startMonth", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, "選択してください"), months.map((month)=>/*#__PURE__*/ React.createElement("option", { key: month, value: month, __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, month)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "属性"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "css_asahi", name: "css_asahi", type: "checkbox", checked: attribute.css_asahi, onChange: handleAttributeChange, className: "h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "css_asahi", className: "ml-2 block text-sm text-gray-900", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, "CSS・朝日")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "sumitomo_meian_1to8", name: "sumitomo_meian_1to8", type: "checkbox", checked: attribute.sumitomo_meian_1to8, onChange: handleAttributeChange, className: "h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded", __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "sumitomo_meian_1to8", className: "ml-2 block text-sm text-gray-900", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, "住友・名安（1月〜8月）")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "sumitomo_meian_9to12", name: "sumitomo_meian_9to12", type: "checkbox", checked: attribute.sumitomo_meian_9to12, onChange: handleAttributeChange, className: "h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "sumitomo_meian_9to12", className: "ml-2 block text-sm text-gray-900", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }, "住友・名安（9月〜12月）")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, "キャンペーン"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { id: "campaign1650", name: "campaign1650", checked: campaign.campaign1650, onChange: handleCampaignChange, __source: { fileName: "", lineNumber: 110, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "campaign1650", className: "ml-2 block text-sm text-gray-900", __source: { fileName: "", lineNumber: 116, columnNumber: 19 }, __self: this }, "1650円キャンペーン")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { id: "campaign2200", name: "campaign2200", checked: campaign.campaign2200, onChange: handleCampaignChange, __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "campaign2200", className: "ml-2 block text-sm text-gray-900", __source: { fileName: "", lineNumber: 127, columnNumber: 19 }, __self: this }, "2200円キャンペーン")))), /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-50 border-l-4 border-yellow-400 p-4", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-yellow-700", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, "契約の処理上、引き落とし予定表から異なる場合がございます。"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, ` `)); }