Redesign the groups page

src/app/groups/page.tsx

@@ -1,5 +1,7 @@
 import { RecentGroupList } from '@/app/groups/recent-group-list'
 import { Button } from '@/components/ui/button'
+import { getGroups } from '@/lib/api'
+import { Plus } from 'lucide-react'
 import { Metadata } from 'next'
 import Link from 'next/link'
 
@@ -8,15 +10,25 @@ export const metadata: Metadata = {
 }
 
 export default async function GroupsPage() {
+  async function getGroupsAction(groupIds: string[]) {
+    'use server'
+    return getGroups(groupIds)
+  }
+
   return (
     <main>
-      <h1 className="font-bold text-2xl mb-4">
-        <Link href="/groups">Recently visited groups</Link>
-      </h1>
-      <Button asChild>
-        <Link href="/groups/create">New group</Link>
-      </Button>
-      <RecentGroupList />
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-baseline mb-2">
+        <h1 className="font-bold text-2xl mb-4">
+          <Link href="/groups">Recently visited groups</Link>
+        </h1>
+        <Button asChild>
+          <Link href="/groups/create">
+            <Plus className="w-4 h-4 mr-2" />
+            Create group
+          </Link>
+        </Button>
+      </div>
+      <RecentGroupList getGroupsAction={getGroupsAction} />
     </main>
   )
 }