From 143a9eda4400d3711be581a06fa9899e6da1a2dc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 20 Mar 2023 16:26:40 -0500
Subject: [PATCH] Use PendingItemsRow for pending members, pass a prop to
 control its size

---
 app/soapbox/components/pending-items-row.tsx     | 16 +++++++++++++---
 app/soapbox/features/group/group-members.tsx     |  3 ++-
 .../groups/components/pending-groups-row.tsx     |  1 +
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/pending-items-row.tsx b/app/soapbox/components/pending-items-row.tsx
index 04ff99d04..0081d33e5 100644
--- a/app/soapbox/components/pending-items-row.tsx
+++ b/app/soapbox/components/pending-items-row.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -9,17 +10,26 @@ interface IPendingItemsRow {
   to: string
   /** Number of pending items. */
   count: number
+  /** Size of the icon. */
+  size?: 'md' | 'lg'
 }
 
-const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count }) => {
+const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' }) => {
   return (
     <Link to={to} className='group'>
       <HStack alignItems='center' justifyContent='between'>
         <HStack alignItems='center' space={2}>
-          <div className='rounded-full bg-primary-200 p-3 text-primary-500 dark:bg-primary-800 dark:text-primary-200'>
+          <div className={clsx('rounded-full bg-primary-200 text-primary-500 dark:bg-primary-800 dark:text-primary-200', {
+            'p-3': size === 'lg',
+            'p-2.5': size === 'md',
+          })}
+          >
             <Icon
               src={require('@tabler/icons/exclamation-circle.svg')}
-              className='h-7 w-7'
+              className={clsx({
+                'h-5 w-5': size === 'md',
+                'h-7 w-7': size === 'lg',
+              })}
             />
           </div>
 
diff --git a/app/soapbox/features/group/group-members.tsx b/app/soapbox/features/group/group-members.tsx
index 755786a33..b1ab415f4 100644
--- a/app/soapbox/features/group/group-members.tsx
+++ b/app/soapbox/features/group/group-members.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 
+import { PendingItemsRow } from 'soapbox/components/pending-items-row';
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { useGroup } from 'soapbox/hooks';
 import { useGroupMembershipRequests } from 'soapbox/hooks/api/groups/useGroupMembershipRequests';
@@ -47,7 +48,7 @@ const GroupMembers: React.FC<IGroupMembers> = (props) => {
         itemClassName='py-3 last:pb-0'
       >
         {(pending.length > 0) && (
-          <div>{pending.length} pending members</div>
+          <PendingItemsRow to={`/groups/${groupId}/manage/requests`} count={pending.length} />
         )}
         {members.map((member) => (
           <GroupMemberListItem
diff --git a/app/soapbox/features/groups/components/pending-groups-row.tsx b/app/soapbox/features/groups/components/pending-groups-row.tsx
index b57b4691c..8f5bfde4b 100644
--- a/app/soapbox/features/groups/components/pending-groups-row.tsx
+++ b/app/soapbox/features/groups/components/pending-groups-row.tsx
@@ -20,6 +20,7 @@ export default () => {
         data-testid='pending-groups-row'
         to='/groups/pending-requests'
         count={groups.length}
+        size='lg'
       />
 
       <Divider />