transitioned from astro to react

src/components/MainContent.tsx

@@ -0,0 +1,34 @@
+import { useStore } from '@nanostores/react';
+import { currentAccount } from '@stores/transactionStore';
+import TransactionTable from './TransactionTable';
+
+export default function MainContent() {
+  const account = useStore(currentAccount);
+
+  if (!account) {
+    return (
+      <main className="main-content">
+        <header className="main-header">
+          <h1>No account selected</h1>
+        </header>
+        <div className="no-account">
+          Please select an account from the sidebar to view transactions.
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="main-content">
+      <header className="main-header">
+        <h1>
+          Transactions for{' '}
+          <span id="current-account-name">
+            {account.name} (***{account.accountNumber.slice(-3)})
+          </span>
+        </h1>
+      </header>
+      <TransactionTable />
+    </main>
+  );
+}