function MainComponent() { const [dailyRate, setDailyRate] = React.useState(''); const [occupancyRate, setOccupancyRate] = React.useState(''); const [numberOfDays, setNumberOfDays] = React.useState(''); const [income, setIncome] = React.useState(''); const handleSubmit = (e)=>{ e.preventDefault(); const estimatedIncome = (dailyRate * (occupancyRate / 100) * numberOfDays).toFixed(2); setIncome(estimatedIncome); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F3F4F6]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white shadow-md rounded-md w-full max-w-[500px]", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-center mb-6", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }, "Income Calculator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "dailyRate", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 25 }, __self: this }, "Daily Rate ($)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "dailyRate", className: "mt-1 p-2 w-full border rounded-md", value: dailyRate, onChange: (e)=>setDailyRate(e.target.value), __source: { fileName: "", lineNumber: 20, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "occupancyRate", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 23, columnNumber: 25 }, __self: this }, "Occupancy Rate (%)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "occupancyRate", className: "mt-1 p-2 w-full border rounded-md", value: occupancyRate, onChange: (e)=>setOccupancyRate(e.target.value), __source: { fileName: "", lineNumber: 24, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "numberOfDays", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 27, columnNumber: 25 }, __self: this }, "Number of Days"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "numberOfDays", className: "mt-1 p-2 w-full border rounded-md", value: numberOfDays, onChange: (e)=>setNumberOfDays(e.target.value), __source: { fileName: "", lineNumber: 28, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 30, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-6 py-2 bg-[#007bff] text-white font-semibold rounded-md hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 31, columnNumber: 25 }, __self: this }, "Calculate"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 35, columnNumber: 21 }, __self: this }, "Estimated Income: $"), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 36, columnNumber: 21 }, __self: this }, income)))); }