Added Divider along with Display count and total count of members

RocketChat · Jan 6, 2025 · b5b982c · b5b982c
1 parent 6d0d0a6
commit b5b982c
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/packages/react/src/views/RoomMembers/RoomMember.js b/packages/react/src/views/RoomMembers/RoomMember.js
@@ -8,6 +8,7 @@ import {
   Input,
   Popup,
   StaticSelect,
+  Divider,
   useComponentOverrides,
   useTheme,
 } from '@embeddedchat/ui-elements';
@@ -108,6 +109,9 @@ const RoomMembers = ({ members }) => {
     setViewStatus(value);
   };
 
+  const totalMembers = members.length;
+  const displayedMembers = filteredMembers.length;
+
   return (
     <ViewComponent
       title="Members"
@@ -179,6 +183,17 @@ const RoomMembers = ({ members }) => {
                   </Box>
                 </Box>
               </Box>
+              <Box
+                css={css`
+                  margin-top: 1rem;
+                  margin-bottom: 1rem;
+                `}
+              >
+                <Divider />
+              </Box>
+              <Box>
+                Showing {displayedMembers} of {totalMembers}
+              </Box>
               <Box css={styles.memberList}>
                 {filteredMembers.length > 0 ? (
                   filteredMembers.map((member) => (