added shadcn dashbaord

app/(auth)/events/[eventId]/page.tsx

@@ -8,7 +8,7 @@ export default async function SingleEventPage({ params }: { params: { eventId: s
     console.log(data)
     
     return (
-        <div className='max-w-[100rem] mx-auto'>
+        <div className=''>
             {data ? (
                 // @ts-ignore
                 <EventInfoDisplay event={data} />

app/(auth)/events/page.tsx

@@ -7,7 +7,7 @@ export default async function EventsPage() {
     console.log(allEvents)
 
     return (
-        <div className="max-w-7xl mx-auto px-4 py-10 space-y-6">
+        <div className="space-y-6">
             <div className="flex items-center justify-between">
                 <h1 className="text-3xl font-bold">Your Events</h1>
                 <Link href="/events/create" className="btn btn-primary">

app/(auth)/guest-book/page.tsx

@@ -11,7 +11,7 @@ export default async function GuestBookPage({ searchParams }: { searchParams: {
 
     const guestBookData = await queries.fetchGuestBookEntries({
         page: currentPage,
-        pageSize: 10,
+        pageSize: 20,
     })
 
     const { entries, totalPages, currentPage: verifiedPage } = !Array.isArray(guestBookData)

app/(auth)/layout.tsx

@@ -3,20 +3,35 @@
 import { SessionProvider } from 'next-auth/react'
 import { ReactNode } from 'react'
 import DashboardNavbar from '@/components/DashboardNavbar'
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
+import { AppSidebar } from '@/components/app-sidebar'
+import { SiteHeader } from '@/components/site-header'
 
 export default function AuthLayout({ children }: { children: ReactNode }) {
     
     return (
         <>
             <SessionProvider>
-                <main className="p-4 max-w-[100rem] mx-auto relative">
-                    <div className='grid grid-cols-1 md:grid-cols-5 gap-4'>
-                        <DashboardNavbar />
-                        <section className="md:col-span-4 mt-16 md:mt-0">
-                        {children}
-                        </section>
-                    </div>
-                </main>
+                <SidebarProvider
+                    style={
+                        {
+                            "--sidebar-width": "calc(var(--spacing) * 72)",
+                            "--header-height": "calc(var(--spacing) * 12)",
+                        } as React.CSSProperties
+                    }
+                >
+                    <AppSidebar />
+                    <SidebarInset>
+                        <SiteHeader />
+                        <main className="flex flex-1 flex-col">
+                             <div className="@container/main flex flex-1 flex-col gap-2">
+                                <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6 px-4">
+                                    {children}
+                                </div>
+                            </div>
+                        </main>
+                    </SidebarInset>
+                </SidebarProvider>
             </SessionProvider>
         </>
     )