feat: implement sharing page

app/layout.tsx

@@ -48,7 +48,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
             <div className="flex min-h-screen flex-col">
               {/* @ts-ignore */}
               <Header />
-              <main className="flex-1 bg-muted/50">{children}</main>
+              <main className="flex flex-1 flex-col bg-muted/50">
+                {children}
+              </main>
             </div>
             <TailwindIndicator />
           </Providers>

app/share/[id]/page.tsx

@@ -1,10 +1,11 @@
 import { type Metadata } from 'next'
-import { auth } from '@clerk/nextjs'
-
-import { Chat } from '@/components/chat'
-import { getChat, getSharedChat } from '@/app/actions'
 import { notFound } from 'next/navigation'
 
+import { formatDate } from '@/lib/utils'
+import { getSharedChat } from '@/app/actions'
+import { ChatList } from '@/components/chat-list'
+import { FooterText } from '@/components/footer'
+
 // export const runtime = 'edge'
 export const preferredRegion = 'home'
 
@@ -17,8 +18,8 @@ export interface SharePageProps {
 export async function generateMetadata({
   params
 }: SharePageProps): Promise<Metadata> {
-  const { user } = await auth()
-  const chat = await getChat(params.id, user?.id ?? '')
+  const chat = await getSharedChat(params.id)
+
   return {
     title: chat?.title.slice(0, 50) ?? 'Chat'
   }
@@ -31,5 +32,22 @@ export default async function SharePage({ params }: SharePageProps) {
     notFound()
   }
 
-  return <Chat id={chat.id} initialMessages={chat.messages} />
+  return (
+    <>
+      <div className="flex-1 space-y-6">
+        <div className="border-b bg-background px-4 py-6 md:px-6 md:py-8">
+          <div className="mx-auto max-w-2xl md:px-6">
+            <div className="space-y-1">
+              <h1 className="text-2xl font-bold">{chat.title}</h1>
+              <div className="text-sm text-muted-foreground">
+                {formatDate(chat.createdAt)} · {chat.messages.length} messages
+              </div>
+            </div>
+          </div>
+        </div>
+        <ChatList messages={chat.messages} />
+      </div>
+      <FooterText className="py-8" />
+    </>
+  )
 }

app/sign-in/[[...sign-in]]/page.tsx

@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
 import { ExternalLink } from '@/components/external-link'
 import { buttonVariants } from '@/components/ui/button'
 import { IconSpinner } from '@/components/ui/icons'
+import { FooterText } from '@/components/footer'
 
 export default function SignInPage() {
   return (
@@ -27,14 +28,7 @@ export default function SignInPage() {
               }
             }}
           />
-          <p className="hidden px-2 text-center text-xs leading-normal text-muted-foreground sm:block">
-            Open source AI chatbot app built with{' '}
-            <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
-            <ExternalLink href="https://vercel.com/storage/kv">
-              Vercel KV
-            </ExternalLink>
-            .
-          </p>
+          <FooterText />
         </ClerkLoaded>
       </div>
     </div>

app/sign-up/[[...sign-up]]/page.tsx

@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/components/ui/button'
 import { ExternalLink } from '@/components/external-link'
 import { IconSpinner } from '@/components/ui/icons'
+import { FooterText } from '@/components/footer'
 
 export default function Page() {
   return (
@@ -28,14 +29,7 @@ export default function Page() {
               }
             }}
           />
-          <p className="hidden px-2 text-center text-xs leading-normal text-muted-foreground sm:block">
-            Open source AI chatbot app built with{' '}
-            <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
-            <ExternalLink href="https://vercel.com/storage/kv">
-              Vercel KV
-            </ExternalLink>
-            .
-          </p>
+          <FooterText />
         </ClerkLoaded>
       </div>
     </div>