Link to groups

web/components/groups/groups-button.tsx

@@ -11,6 +11,7 @@ import { Modal } from 'web/components/layout/modal'
 import { Col } from 'web/components/layout/col'
 import { joinGroup, leaveGroup } from 'web/lib/firebase/groups'
 import { firebaseLogin } from 'web/lib/firebase/users'
+import { GroupLink } from 'web/pages/groups'
 
 export function GroupsButton(props: { user: User }) {
   const { user } = props
@@ -72,7 +73,9 @@ function GroupItem(props: { group: Group; className?: string }) {
   const { group, className } = props
   return (
     <Row className={clsx('items-center justify-between gap-2 p-2', className)}>
-      <Row className="line-clamp-1 items-center gap-2">{group.name}</Row>
+      <Row className="line-clamp-1 items-center gap-2">
+        <GroupLink group={group} />
+      </Row>
       <JoinOrLeaveGroupButton group={group} />
     </Row>
   )

web/pages/groups.tsx

@@ -15,6 +15,8 @@ import { getUser, User } from 'web/lib/firebase/users'
 import { Tabs } from 'web/components/layout/tabs'
 import { GroupMembersList } from 'web/pages/group/[...slugs]'
 import { checkAgainstQuery } from 'web/hooks/use-sort-and-query-params'
+import { SiteLink } from 'web/components/site-link'
+import clsx from 'clsx'
 
 export async function getStaticProps() {
   const groups = await listAllGroups().catch((_) => [])
@@ -202,3 +204,16 @@ export function GroupCard(props: { group: Group; creator: User | undefined }) {
     </Col>
   )
 }
+
+export function GroupLink(props: { group: Group; className?: string }) {
+  const { group, className } = props
+
+  return (
+    <SiteLink
+      href={groupPath(group.slug)}
+      className={clsx('z-10 truncate', className)}
+    >
+      {group.name}
+    </SiteLink>
+  )
+}