function DepositButtonNavigator({ onNavigate }) { return /*#__PURE__*/ React.createElement("button", { type: "button", name: "deposit", onClick: onNavigate, className: "flex-1 p-3 bg-[#10B981] text-white rounded hover:bg-[#059669] transition duration-150", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Deposit"); } function DepositButtonNavigatorStory() { const onNavigate = ()=>{ console.log('Navigating to deposit page...'); // Usually, navigation logic will be here }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DepositButtonNavigator, { onNavigate: onNavigate, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [page, setPage] = React.useState('main'); const handleBack = ()=>setPage('main'); const handleNavigate = ()=>setPage('deposit'); if (page === 'main') { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#121212] mb-8", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Simple Bank UI"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-6 bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-6", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "amount", className: "block text-sm font-medium text-[#6B7280]", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, "Amount"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", className: "mt-1 block w-full p-3 border border-[#D1D5DB] rounded-md shadow-sm focus:border-[#6366F1] focus:ring-[#6366F1]", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(DepositButtonNavigator, { onNavigate: handleNavigate, __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", name: "withdraw", onClick: ()=>setPage('withdraw'), className: "flex-1 p-3 bg-[#EF4444] text-white rounded hover:bg-[#DC2626] transition duration-150", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "Withdraw"))))); } else { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#121212] mb-8", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, page === 'deposit' ? 'Deposit' : 'Withdraw', " Page"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleBack, className: "mt-4 p-3 w-full bg-[#3B82F6] text-white rounded hover:bg-[#2563EB] transition duration-150", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Back")); } }