Add dynamic SEO metadata to join group page

app/(standalone)/join/[groupId]/page.tsx

@@ -25,8 +25,31 @@ import { QueryOrigin } from '@/constants'
 import JoinGroupForm from './_components/join-group-form'
 import { Path } from '@/lib/utils/path'
 
-export const metadata: Metadata = {
-  title: 'Join Group',
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ groupId: string }>
+}): Promise<Metadata> {
+  const { groupId } = await params
+
+  if (!groupId) {
+    return {
+      title: 'Join Group',
+    }
+  }
+
+  const group = await getGroup(groupId)
+
+  if (!group) {
+    return {
+      title: 'Join Group',
+    }
+  }
+
+  return {
+    title: `Join ${group.name}`,
+    description: `Join ${group.name} to tip on Formula 1 races with the group members.`,
+  }
 }
 
 export default async function JoinGroup({
@@ -142,18 +165,6 @@ export default async function JoinGroup({
     }))
   }
 
-  function getGroup(id: Database.Group['id']) {
-    return db.query.groupsTable.findFirst({
-      where(fields, operators) {
-        return operators.eq(fields.id, id)
-      },
-      columns: {
-        name: true,
-        iconName: true,
-      },
-    })
-  }
-
   function EmptyState() {
     return (
       <Card>
@@ -192,3 +203,15 @@ export default async function JoinGroup({
     )
   }
 }
+
+function getGroup(id: Database.Group['id']) {
+  return db.query.groupsTable.findFirst({
+    where(fields, operators) {
+      return operators.eq(fields.id, id)
+    },
+    columns: {
+      name: true,
+      iconName: true,
+    },
+  })
+}