function MainComponent() { const balance = "9,500"; const income = "3,100"; const expenses = "1,700"; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f8fc] p-6 md:p-12", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-[#121212] mb-6", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "My Budget"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 lg:p-10 mb-6", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, "Balance"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-semibold font-roboto text-[#27ae60]", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "$", balance)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#ecf0f1] p-4 rounded-lg flex justify-between items-center", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "Income"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg text-[#27ae60]", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "$", income)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#ecf0f1] p-4 rounded-lg flex justify-between items-center", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Expenses"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg text-[#c0392b]", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "$", expenses)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 lg:p-10", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto text-[#121212] mb-6", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Add Transaction"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "description", className: "block text-md font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "description", className: "w-full p-3 border border-[#bdc3c7] rounded-lg font-roboto", placeholder: "Enter description", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "amount", className: "block text-md font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Amount ($)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "amount", className: "w-full p-3 border border-[#bdc3c7] rounded-lg font-roboto", placeholder: "Enter amount", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", id: "income", name: "transactionType", value: "income", className: "mr-2", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "income", className: "font-roboto text-md text-[#121212] mr-4", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Income"), /*#__PURE__*/ React.createElement("input", { type: "radio", id: "expense", name: "transactionType", value: "expense", className: "mr-2", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "expense", className: "font-roboto text-md text-[#121212]", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "Expense")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#27ae60] text-white p-3 rounded-lg font-roboto font-semibold", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Add Transaction")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } `)); }