function MainComponent() { const [useOption, setUseOption] = React.useState(false); const [rate, setRate] = React.useState(''); const [points, setPoints] = React.useState(''); const [expiry, setExpiry] = React.useState(''); const [errors, setErrors] = React.useState({ rate: '', expiry: '' }); const handleCheckboxChange = (e)=>{ setUseOption(e.target.checked); if (!e.target.checked) { setRate(''); setPoints(''); setExpiry(''); setErrors({ rate: '', expiry: '' }); } }; const validate = ()=>{ const newErrors = { rate: '', expiry: '' }; if (useOption) { if (rate < 1 || rate > 99) { newErrors.rate = '1から99までの数を入力してください。'; } if (expiry < 1) { newErrors.expiry = '1以上の数を入力してください。'; } } setErrors(newErrors); return !newErrors.rate && !newErrors.expiry; }; const handleSave = ()=>{ if (validate()) { // Handle save logic } }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "利用する", /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "use", className: "ml-2", onChange: handleCheckboxChange, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }))), useOption && /*#__PURE__*/ React.createElement("div", { className: "mb-4", id: "additionalFields", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-1", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "付与率"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "rate", className: "border border-gray-300 p-2 w-full", value: rate, onChange: (e)=>setRate(e.target.value), __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), errors.rate && /*#__PURE__*/ React.createElement("span", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 58, columnNumber: 29 }, __self: this }, errors.rate)), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-1", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "ポイント数"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "points", className: "border border-gray-300 p-2 w-full", value: points, onChange: (e)=>setPoints(e.target.value), __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-1", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "誓う"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "expiry", className: "border border-gray-300 p-2 w-full", value: expiry, onChange: (e)=>setExpiry(e.target.value), __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }), errors.expiry && /*#__PURE__*/ React.createElement("span", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 81, columnNumber: 31 }, __self: this }, errors.expiry))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 p-2 bg-blue-500 text-white disabled:opacity-50", id: "saveButton", onClick: handleSave, disabled: !useOption || errors.rate || errors.expiry, __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, "保存"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, ` #additionalFields.hidden + #saveButton { margin-top: 1.5rem; } `)); }