function MainComponent() { const [salesAmount, setSalesAmount] = React.useState(''); const [commissionRate, setCommissionRate] = React.useState(''); const [commissionEarned, setCommissionEarned] = React.useState(''); const handleSalesAmountChange = (e)=>setSalesAmount(e.target.value); const handleCommissionRateChange = (e)=>setCommissionRate(e.target.value); const handleCalculate = ()=>{ const amount = parseFloat(salesAmount); const rate = parseFloat(commissionRate); if (!isNaN(amount) && !isNaN(rate)) { const earned = (amount * (rate / 100)).toFixed(2); setCommissionEarned(earned); } }; const handleReset = ()=>{ setSalesAmount(''); setCommissionRate(''); setCommissionEarned(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "Commission Calculator"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "salesAmount", className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Sales Amount (USD):"), /*#__PURE__*/ React.createElement("input", { name: "salesAmount", type: "number", className: "border px-4 py-2 mb-4 w-full", min: "0", step: "0.01", value: salesAmount, onChange: handleSalesAmountChange, __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "commissionRate", className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Commission Rate (%):"), /*#__PURE__*/ React.createElement("select", { name: "commissionRate", className: "border px-4 py-2 mb-4 w-full", value: commissionRate, onChange: handleCommissionRateChange, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Select Rate"), [ 5, 10, 15, 20 ].map((rate)=>/*#__PURE__*/ React.createElement("option", { key: rate, value: rate, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, rate, "%"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 font-roboto w-[48%]", onClick: handleCalculate, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Calculate"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white px-4 py-2 font-roboto w-[48%]", onClick: handleReset, __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Reset"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "commissionEarned", className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Commission Earned (USD):"), /*#__PURE__*/ React.createElement("input", { name: "commissionEarned", type: "text", className: "border px-4 py-2 mb-4 w-full", readOnly: true, value: commissionEarned, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this })); }