function MainComponent() { const [quantity, setQuantity] = React.useState(''); const [duration, setDuration] = React.useState(''); const [option, setOption] = React.useState('none'); const [total, setTotal] = React.useState(0); const [breakdown, setBreakdown] = React.useState('詳細なし'); const [error, setError] = React.useState(''); const validateInputs = ()=>{ if (!quantity || quantity <= 0 || !duration || duration <= 0) { setError('数量と期間は正の数で入力してください。'); return false; } setError(''); return true; }; const calculateTotal = ()=>{ if (!validateInputs()) return; let baseRate = 100; let optionRate = option === 'none' ? 0 : option === 'option1' ? 50 : 100; let calculatedTotal = (baseRate + optionRate) * quantity * duration; setTotal(calculatedTotal); setBreakdown(`基本料金: ￥${baseRate * quantity * duration}, オプション料金: ￥${optionRate * quantity * duration}`); }; return /*#__PURE__*/ React.createElement("div", { className: "p-5 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "料金シミュレーション"), /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "quantity", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "数量"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantity", id: "quantity", value: quantity, onChange: (e)=>setQuantity(e.target.value), className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "duration", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "期間 (月)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "duration", id: "duration", value: duration, onChange: (e)=>setDuration(e.target.value), className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "option", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "オプション"), /*#__PURE__*/ React.createElement("select", { name: "option", id: "option", value: option, onChange: (e)=>setOption(e.target.value), className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "none", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "なし"), /*#__PURE__*/ React.createElement("option", { value: "option1", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "オプション1"), /*#__PURE__*/ React.createElement("option", { value: "option2", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "オプション2"))), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: calculateTotal, className: "w-full py-2 px-4 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "計算"), /*#__PURE__*/ React.createElement("button", { type: "reset", onClick: ()=>{ setQuantity(''); setDuration(''); setOption('none'); setTotal(0); setBreakdown('詳細なし'); setError(''); }, className: "w-full mt-2 py-2 px-4 bg-gray-500 text-white font-semibold rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "リセット")), error && /*#__PURE__*/ React.createElement("div", { className: "error mt-4", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "シミュレーション結果"), /*#__PURE__*/ React.createElement("p", { id: "totalAmount", className: "mt-2 text-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "合計: ￥", total), /*#__PURE__*/ React.createElement("p", { id: "breakdown", className: "mt-1 text-sm text-gray-600", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "内訳: ", breakdown))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, ` .error { color: red; font-size: 0.875rem; } .success { color: green; font-size: 0.875rem; } `)); }