Update <main> container to be reuseable

frontend/app/about/page.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import Header from "@/app/components/header";
+import Main from "@/app/components/ui/main-container";
 
 export default function About() {
 
   return (
-    <main id='main-container' className="flex min-h-screen flex-col items-center gap-10 background-gradient dark:background-gradient-dark md:pt-10 pt-24 px-10">
+    <Main>
       <Header />
       <div className="rounded-xl shadow-xl p-4 mb-8 z-10 max-w-5xl w-full">
         <div className="max-w-2xl mx-auto p-4">
@@ -26,6 +27,6 @@ export default function About() {
           </div>
         </div>
       </div>
-    </main>
+    </Main>
   );
 }

frontend/app/chat/page.tsx

@@ -1,14 +1,15 @@
 "use client";
 
 import Header from "@/app/components/header";
+import Main from "@/app/components/ui/main-container";
 import ChatSection from "@/app/components/chat-section";
 
 export default function Chat() {
 
   return (
-    <main id='main-container' className="flex min-h-screen flex-col items-center gap-10 background-gradient dark:background-gradient-dark md:pt-10 pt-24 px-10">
+    <Main>
       <Header />
       <ChatSection />
-    </main>
+    </Main>
   );
 }

frontend/app/components/ui/main-container.tsx

@@ -0,0 +1,18 @@
+// main-container.tsx
+
+import React, { ReactNode } from "react";
+import { cn } from "@/app/components/ui/lib/utils";
+
+interface ContainerProps {
+    children: ReactNode;
+}
+
+const Main: React.FC<ContainerProps> = ({ children }) => {
+    return (
+        <main className={cn("flex min-h-screen flex-col items-center gap-10 background-gradient dark:background-gradient-dark pt-10 px-4")}>
+            {children}
+        </main>
+    );
+};
+
+export default Main;

frontend/app/page.tsx

@@ -6,12 +6,13 @@ import Link from 'next/link';
 import * as React from 'react'
 import { IconSpinner } from '@/app/components/ui/icons'
 import logo from '../public/smart-retrieval-logo.webp'
+import Main from "@/app/components/ui/main-container";
 
 export default function Home() {
   const [isLoading, setIsLoading] = React.useState(false);
 
   return (
-    <main id='main-container' className="flex min-h-screen flex-col items-center gap-10 background-gradient dark:background-gradient-dark md:pt-10 pt-24 px-10">
+    <Main>
       <Header />
       <div className="rounded-xl shadow-xl p-4 mb-8 z-10 max-w-5xl w-full">
         <div className="max-w-2xl mx-auto p-4 text-center">
@@ -47,6 +48,6 @@ export default function Home() {
           </div>
         </div>
       </div>
-    </main>
+    </Main>
   );
 }

frontend/app/search/page.tsx

@@ -1,14 +1,15 @@
 "use client";
 
 import Header from "@/app/components/header";
+import Main from "@/app/components/ui/main-container";
 import SearchSection from "@/app/components/search-section";
 
 export default function Search() {
 
   return (
-    <main id='main-container' className="flex min-h-screen flex-col items-center gap-10 background-gradient dark:background-gradient-dark md:pt-10 pt-24 px-10">
+    <Main>
       <Header />
       <SearchSection />
-    </main>
+    </Main>
   );
 }

frontend/app/sign-in/page.tsx

@@ -2,10 +2,11 @@
 
 import { GoogleLoginButton, SGIDLoginButton } from '@/app/components/login-buttons';
 import Header from "@/app/components/header";
+import Main from "@/app/components/ui/main-container";
 
 const SignInPage = () => {
   return (
-    <main id='main-container' className="flex min-h-screen flex-col items-center gap-10 background-gradient dark:background-gradient-dark md:pt-10 pt-24 px-10">
+    <Main>
       <Header />
       <div className="rounded-xl shadow-xl p-4 mb-8 z-10 max-w-5xl w-full">
         <div className="max-w-2xl mx-auto text-center">
@@ -38,7 +39,7 @@ const SignInPage = () => {
           </div>
         </div>
       </div>
-    </main>
+    </Main>
   );
 };