Update LoanInputForm.jsx

Author: Yashraghuvans

app/components/LoanInputForm.jsx

@@ -8,6 +8,7 @@ function LoanInputForm({ onLoanSubmit, onCalculateEMI }) {
     const [principal, setPrincipal] = useState('');
     const [downPayment, setDownPayment] = useState('');
     const [prePayment, setprePayment] = useState('');
+    const bankNames = ['SBI', 'HDFC', 'Axis', 'ICICI', 'PNB', 'LIC', 'Citibank', 'Others'];
 
     const handleSubmit = (e) => {
         e.preventDefault();
@@ -38,6 +39,7 @@ function LoanInputForm({ onLoanSubmit, onCalculateEMI }) {
             annualInterestRate: parseFloat(interest),
             loanTenureYears: parseFloat(timePeriod),
             prePayment: parseFloat(prePayment || 0),
+            bankName: bankName,
         };
         onCalculateEMI(loanParams);
     };
@@ -46,18 +48,23 @@ function LoanInputForm({ onLoanSubmit, onCalculateEMI }) {
         <div className="loan-input-form">
             <h2 className="text-xl font-semibold mb-4 text-gray-100">Enter Loan Details</h2>
             <form onSubmit={handleSubmit}>
-                <div className="mb-4">
-                    <label htmlFor="bankName" className="block text-gray-300 text-sm font-bold mb-2">Bank Name:</label>
-                    <input
-                        type="text"
-                        id="bankName"
-                        value={bankName}
-                        onChange={(e) => setBankName(e.target.value)}
-                        required
-                        className="shadow appearance-none border rounded w-full py-2 px-3  leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600 focus:ring-blue-500 focus:border-blue-500"
-                        placeholder="Bank Name"
-                    />
-                </div>
+            <div className="mb-4">
+                <label htmlFor="bankName" className="block text-gray-300 text-sm font-bold mb-2">Bank Name:</label>
+                <select
+                    id="bankName"
+                    value={bankName}
+                    onChange={(e) => setBankName(e.target.value)}
+                    required
+                    className="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600 focus:ring-blue-500 focus:border-blue-500"
+                >
+                    <option value="">Select Bank</option> 
+                    {bankNames.map((bank) => (
+                        <option key={bank} value={bank}>
+                            {bank}
+                        </option>
+                    ))}
+                </select>
+            </div>
                 <div className="mb-4">
                     <label htmlFor="location" className="block text-gray-300 text-sm font-bold mb-2">Location:</label>
                     <input
@@ -118,7 +125,7 @@ function LoanInputForm({ onLoanSubmit, onCalculateEMI }) {
                     />
                 </div>
                 <div className="mb-4">
-                    <label htmlFor="downPayment" className="block text-gray-300 text-sm font-bold mb-2">Down Payment:</label>
+                    <label htmlFor="downPayment" className="block text-gray-300 text-sm font-bold mb-2">Pre Payment:</label>
                     <input
                         type="number"
                         id="prePayment"