Added metaData in Layout

app/(auth)/layout.tsx

@@ -1,16 +1,28 @@
+import { siteConfig } from "@/config/site";
+import { Metadata } from "next";
 import { Logo } from "./_components/logo";
 
-const AuthLayout = ({
-  children
-}: {
-  children: React.ReactNode;
-}) => {
-  return ( 
+export const metadata: Metadata = {
+  title: {
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  icons: [
+    {
+      url: "/spooky.svg",
+      href: "/spooky.svg",
+    },
+  ],
+};
+
+const AuthLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
     <div className="h-full flex flex-col items-center justify-center space-y-6">
       <Logo />
       {children}
     </div>
   );
 };
- 
+
 export default AuthLayout;

app/(browse)/layout.tsx

@@ -3,25 +3,35 @@ import { Suspense } from "react";
 import { Navbar } from "./_components/navbar";
 import { Container } from "./_components/container";
 import { Sidebar, SidebarSkeleton } from "./_components/sidebar";
+import { siteConfig } from "@/config/site";
+import { Metadata } from "next";
 
-const BrowseLayout = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
-  return ( 
+export const metadata: Metadata = {
+  title: {
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  icons: [
+    {
+      url: "/spooky.svg",
+      href: "/spooky.svg",
+    },
+  ],
+};
+
+const BrowseLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
     <>
       <Navbar />
       <div className="flex h-full pt-20">
         <Suspense fallback={<SidebarSkeleton />}>
           <Sidebar />
         </Suspense>
-        <Container>
-          {children}
-        </Container>
+        <Container>{children}</Container>
       </div>
     </>
   );
 };
- 
-export default BrowseLayout;
+
+export default BrowseLayout;

app/(dashboard)/u/[username]/layout.tsx

@@ -5,33 +5,44 @@ import { getSelfByUsername } from "@/lib/auth-service";
 import { Navbar } from "./_components/navbar";
 import { Sidebar } from "./_components/sidebar";
 import { Container } from "./_components/container";
+import { siteConfig } from "@/config/site";
+import { Metadata } from "next";
 
 interface CreatorLayoutProps {
   params: { username: string };
   children: React.ReactNode;
+}
+
+export const metadata: Metadata = {
+  title: {
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  icons: [
+    {
+      url: "/spooky.svg",
+      href: "/spooky.svg",
+    },
+  ],
 };
 
-const CreatorLayout = async ({
-  params,
-  children,
-}: CreatorLayoutProps) => {
+const CreatorLayout = async ({ params, children }: CreatorLayoutProps) => {
   const self = await getSelfByUsername(params.username);
 
   if (!self) {
     redirect("/");
   }
 
-  return ( 
+  return (
     <>
       <Navbar />
       <div className="flex h-full pt-20">
         <Sidebar />
-        <Container>
-          {children}
-        </Container>
+        <Container>{children}</Container>
       </div>
     </>
   );
-}
- 
-export default CreatorLayout;
+};
+
+export default CreatorLayout;

app/layout.tsx

@@ -1,23 +1,33 @@
-import { ClerkProvider } from '@clerk/nextjs'
-import { dark } from '@clerk/themes'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import { Toaster } from 'sonner';
-import './globals.css'
+import { ClerkProvider } from "@clerk/nextjs";
+import { dark } from "@clerk/themes";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { Toaster } from "sonner";
+import "./globals.css";
 
-import { ThemeProvider } from '@/components/theme-provider'
+import { ThemeProvider } from "@/components/theme-provider";
+import { siteConfig } from "@/config/site";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: {
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  icons: [
+    {
+      url: "/spooky.svg",
+      href: "/spooky.svg",
+    },
+  ],
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <ClerkProvider appearance={{ baseTheme: dark }}>
@@ -34,5 +44,5 @@ export default function RootLayout({
         </body>
       </html>
     </ClerkProvider>
-  )
+  );
 }

config/site.ts

@@ -0,0 +1,4 @@
+export const siteConfig = {
+  name: "Gamehub",
+  description: "A place to find your favorite gamers and streamers",
+};