From 0e7b879aa8d771b58fc5783f78f981cb29432361 Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Thu, 7 Dec 2023 20:54:11 -0500
Subject: Redesign the groups page

---
 src/app/groups/page.tsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

(limited to 'src/app/groups/page.tsx')

diff --git a/src/app/groups/page.tsx b/src/app/groups/page.tsx
index 86c63ac..0c46d99 100644
--- a/src/app/groups/page.tsx
+++ b/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>
   )
 }
-- 
cgit v1.3