function MainComponent() { const handleSubmit = (event)=>{ event.preventDefault(); // handle form submission }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#fafafa]", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs bg-white rounded-lg shadow-md px-4 py-6", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#121212] font-roboto text-xl mb-2 text-center", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "🐷 Piggy Bank Planner"), /*#__PURE__*/ React.createElement("p", { className: "text-[#555] font-roboto text-base mb-4 text-center", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "Let's make budgeting oinktastic!"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "income", className: "block text-[#333] font-roboto text-xs mb-1", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "Monthly Dough 🍞"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "income", name: "income", required: true, className: "w-full px-2 py-1 border rounded-lg text-[#333] font-roboto", placeholder: "Enter your cash", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "rent", className: "block text-[#333] font-roboto text-xs mb-1", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Castle Costs 🏰"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "rent", name: "rent", required: true, className: "w-full px-2 py-1 border rounded-lg text-[#333] font-roboto", placeholder: "Rent or mortgage", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "groceries", className: "block text-[#333] font-roboto text-xs mb-1", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Munchies Budget 🍔"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "groceries", name: "groceries", required: true, className: "w-full px-2 py-1 border rounded-lg text-[#333] font-roboto", placeholder: "For all the snacks", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "utilities", className: "block text-[#333] font-roboto text-xs mb-1", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Bill Buffet 💡"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "utilities", name: "utilities", required: true, className: "w-full px-2 py-1 border rounded-lg text-[#333] font-roboto", placeholder: "Keep the lights on", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "savings", className: "block text-[#333] font-roboto text-xs mb-1", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Treasure Trove 💰"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "savings", name: "savings", required: true, className: "w-full px-2 py-1 border rounded-lg text-[#333] font-roboto", placeholder: "Savings goal", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#ffca28] text-[#121212] font-roboto rounded-lg px-3 py-1", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Crunch the Numbers 🧮")))); }