function MainComponent({ section }) { let content; if (section === "home") { content = /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "How to Save Money"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Create a budget and stick to it."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "Avoid unnecessary expenses."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Invest in a savings account."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Track your spending."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Plan for major expenses in advance."))); } else if (section === "calculation") { content = /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Money Calculation"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px]", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", placeholder: "Enter amount", className: "w-full p-2 mb-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Calculate"))); } else if (section === "tracker") { content = /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Finance Tracker"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "description", placeholder: "Description", className: "w-full p-2 mb-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", placeholder: "Amount", className: "w-full p-2 mb-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-green-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Add Transaction"))); } else if (section === "about") { content = /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "This app helps you in financial calculations and tracking your expenses.")); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "font-roboto flex justify-around p-4 bg-gray-200", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSection("home"), className: "text-xl", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home", __source: { fileName: "", lineNumber: 64, columnNumber: 72 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSection("calculation"), className: "text-xl", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calculator", __source: { fileName: "", lineNumber: 65, columnNumber: 79 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSection("tracker"), className: "text-xl", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line", __source: { fileName: "", lineNumber: 66, columnNumber: 75 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSection("about"), className: "text-xl", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle", __source: { fileName: "", lineNumber: 67, columnNumber: 73 }, __self: this }))), content); } function StoryComponent() { const [section, setSection1] = React.useState("home"); return /*#__PURE__*/ React.createElement(MainComponent, { section: section, setSection: setSection1, __source: { fileName: "", lineNumber: 77, columnNumber: 10 }, __self: this }); }