UI Updates

app/components/Header.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const Header: React.FC = () => {
+  return (
+    <header className="w-full bg-white border-b border-gray-200 px-4 py-3">
+      <nav className="max-w-7xl mx-auto flex items-center justify-between">
+        <div className="flex items-center">
+          <h1 className="text-xl font-semibold">Your App Name</h1>
+        </div>
+        {/* Add navigation items here as needed */}
+      </nav>
+    </header>
+  );
+}; 

app/layout/PageContainer.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Header } from '../components/header/Header';
+import BackgroundRays from '../components/ui/BackgroundRays';
+
+interface PageContainerProps {
+  children: React.ReactNode;
+}
+
+export const PageContainer: React.FC<PageContainerProps> = ({ children }) => {
+  return (
+    <div className="h-screen w-full flex flex-col bg-bolt-elements-background-depth-1 dark:bg-black overflow-hidden">
+      <Header />
+      <BackgroundRays />
+      <div className="flex-1 w-full overflow-y-auto page-content">
+        {children}
+      </div>
+    </div>
+  );
+};

app/root.tsx

@@ -171,7 +171,7 @@ export default function App() {
       <ClientOnly>
         <ThemeProvider />
         <AuthProvider data={data} />
-        <main className="">{isLoading ? <div></div> : <Outlet />}</main>
+        <main className="h-full min-h-screen">{isLoading ? <div></div> : <Outlet />}</main>
         <ToastContainer position="bottom-right" theme={theme} />
         <AuthModal />
       </ClientOnly>

app/routes/_index.tsx

@@ -1,11 +1,9 @@
 import { json, type MetaFunction } from '~/lib/remix-types';
 import { Suspense } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
-import { BaseChat } from '~/components/chat/BaseChat';
-import { Chat } from '~/components/chat/Chat.client';
-import { Header } from '~/components/header/Header';
-import BackgroundRays from '~/components/ui/BackgroundRays';
-
+import { BaseChat } from '~/components/chat/BaseChat/BaseChat';
+import { Chat } from '~/components/chat/Chat/Chat.client';
+import { PageContainer } from '~/layout/PageContainer';
 export const meta: MetaFunction = () => {
   return [{ title: 'Nut' }];
 };
@@ -16,12 +14,10 @@ const Nothing = () => null;
 
 export default function Index() {
   return (
-    <div className="flex flex-col h-full min-h-screen w-full bg-bolt-elements-background-depth-1 dark:bg-black">
-      <BackgroundRays />
-      <Header />
+    <PageContainer>
       <Suspense fallback={<Nothing />}>
         <ClientOnly fallback={<BaseChat />}>{() => <Chat />}</ClientOnly>
       </Suspense>
-    </div>
+    </PageContainer>
   );
 }

app/routes/about.tsx

@@ -1,15 +1,12 @@
 import { ClientOnly } from 'remix-utils/client-only';
-import { Header } from '~/components/header/Header';
 import { Menu } from '~/components/sidebar/Menu.client';
-import BackgroundRays from '~/components/ui/BackgroundRays';
 import { TooltipProvider } from '@radix-ui/react-tooltip';
+import { PageContainer } from '~/layout/PageContainer';
 
 function AboutPage() {
   return (
     <TooltipProvider>
-      <div className="flex flex-col h-full min-h-screen w-full bg-bolt-elements-background-depth-1">
-        <BackgroundRays />
-        <Header />
+      <PageContainer>
         <ClientOnly>{() => <Menu />}</ClientOnly>
         <div className="max-w-3xl mx-auto px-6 py-12 prose dark:text-gray-200 prose-p:text-gray-700 dark:prose-p:text-gray-300 prose-a:text-bolt-elements-accent">
           <h1 className="text-4xl font-bold mb-8 text-gray-900 dark:text-gray-200">About Nut</h1>
@@ -61,7 +58,7 @@ function AboutPage() {
             .
           </p>
         </div>
-      </div>
+      </PageContainer>
     </TooltipProvider>
   );
 }