initial work on exchanges page

apps/web/src/components/layout/Layout.tsx

@@ -1,22 +1,28 @@
-import { ReactNode, useState } from 'react';
+import { useState } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
 import { Header } from './Header';
 import { Sidebar } from './Sidebar';
 
-interface LayoutProps {
-  children: ReactNode;
-  title?: string;
-}
-
-export function Layout({ children, title }: LayoutProps) {
+export function Layout() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const location = useLocation();
+
+  // Determine title from current route
+  const getTitle = () => {
+    const path = location.pathname.replace('/', '');
+    if (!path || path === 'dashboard') return 'Dashboard';
+    return path.charAt(0).toUpperCase() + path.slice(1);
+  };
 
   return (
     <div className="h-full">
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-      <Header setSidebarOpen={setSidebarOpen} title={title} />
+      <Header setSidebarOpen={setSidebarOpen} title={getTitle()} />
 
-      <main className="py-4 lg:pl-60 w-full h-full overflow-y-auto scrollbar-sleek">
-        <div className="px-4 flex-col h-full">{children}</div>
+      <main className="py-4 lg:pl-60 w-full h-full overflow-y-auto">
+        <div className="px-4 flex-col h-full">
+          <Outlet />
+        </div>
       </main>
     </div>
   );