function EmiCalculatorInterface() { const [principal, setPrincipal] = React.useState(""); const [rate, setRate] = React.useState(""); const [tenure, setTenure] = React.useState(""); const [emi, setEmi] = React.useState(null); const calculateEmi = (p, r, t)=>{ const monthlyRate = r / 12 / 100; const emi = p * monthlyRate * Math.pow(1 + monthlyRate, t * 12) / (Math.pow(1 + monthlyRate, t * 12) - 1); return emi.toFixed(2); }; const handleSubmit = (e)=>{ e.preventDefault(); const emi = calculateEmi(parseFloat(principal), parseFloat(rate), parseFloat(tenure)); setEmi(emi); }; return /*#__PURE__*/ React.createElement("div", { className: "h-screen flex items-center justify-center bg-gray-100", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-8 w-[400px]", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Flat Loan EMI Calculator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold mb-2", htmlFor: "principal", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Principal Amount"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "principal", name: "principal", value: principal, onChange: (e)=>setPrincipal(e.target.value), className: "w-full px-3 py-2 border rounded", required: true, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold mb-2", htmlFor: "rate", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Annual Interest Rate (%)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "rate", name: "rate", value: rate, onChange: (e)=>setRate(e.target.value), className: "w-full px-3 py-2 border rounded", required: true, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold mb-2", htmlFor: "tenure", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Loan Tenure (years)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "tenure", name: "tenure", value: tenure, onChange: (e)=>setTenure(e.target.value), className: "w-full px-3 py-2 border rounded", required: true, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Calculate")), emi !== null && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border bg-blue-100 rounded text-center", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Your Monthly EMI is"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, emi)))); } function EmiCalculatorInterfaceStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EmiCalculatorInterface, { __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EmiCalculatorInterface, { __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); }