function MainComponent() { const [mode, setMode] = React.useState('Accounts'); const handleModeChange = (newMode)=>{ setMode(newMode); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f3f4f6] p-4 rounded-lg shadow-md w-full max-w-[400px] mx-auto", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4 border-b-2 border-gray-200 pb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg text-[#1f2937]", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleModeChange('Accounts'), className: `font-semibold text-lg ${mode === 'Accounts' ? 'border-b-2 border-[#6366F1]' : 'text-[#d1d5db]'} px-3 py-1 mr-2`, __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Accounts"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleModeChange('Counterparties'), className: `font-semibold text-lg ${mode === 'Counterparties' ? 'border-b-2 border-[#6366F1]' : 'text-[#d1d5db]'} px-3 py-1 mr-2`, __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Counterparties"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleModeChange('Budget Items'), className: `font-semibold text-lg ${mode === 'Budget Items' ? 'border-b-2 border-[#6366F1]' : 'text-[#d1d5db]'} px-3 py-1`, __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Budget Items"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, mode === 'Accounts' && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow overflow-hidden rounded-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-5 sm:p-6", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm leading-6 font-medium text-[#4b5563]", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "Accounts Overview"), /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("dl", { __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", __source: { fileName: "", lineNumber: 25, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-sm font-medium text-gray-500", __source: { fileName: "", lineNumber: 26, columnNumber: 21 }, __self: this }, "Total Balance"), /*#__PURE__*/ React.createElement("dd", { className: "mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2", __source: { fileName: "", lineNumber: 27, columnNumber: 21 }, __self: this }, "$4,500.00")), /*#__PURE__*/ React.createElement("div", { className: "bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-sm font-medium text-gray-500", __source: { fileName: "", lineNumber: 30, columnNumber: 21 }, __self: this }, "Transactions"), /*#__PURE__*/ React.createElement("dd", { className: "mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2", __source: { fileName: "", lineNumber: 31, columnNumber: 21 }, __self: this }, "45")))))), mode === 'Counterparties' && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow overflow-hidden rounded-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-5 sm:p-6", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm leading-6 font-medium text-[#4b5563]", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Counterparties"), /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-2", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "text-sm text-gray-900", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, "Company A"), /*#__PURE__*/ React.createElement("li", { className: "text-sm text-gray-900", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, "Company B"), /*#__PURE__*/ React.createElement("li", { className: "text-sm text-gray-900", __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, "Company C"))))), mode === 'Budget Items' && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow overflow-hidden rounded-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-5 sm:p-6", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm leading-6 font-medium text-[#4b5563]", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "Budget Items"), /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-2", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "text-sm text-gray-900", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, "Marketing"), /*#__PURE__*/ React.createElement("li", { className: "text-sm text-gray-900", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, "R&D"), /*#__PURE__*/ React.createElement("li", { className: "text-sm text-gray-900", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, "Utilities"))))))); }