diff --git a/web/chat/member-list-sidebar/role-group-member-list.css b/web/chat/member-list-sidebar/role-group-member-list.css new file mode 100644 index 000000000..736eacf36 --- /dev/null +++ b/web/chat/member-list-sidebar/role-group-member-list.css @@ -0,0 +1,6 @@ +.roleNameText { + color: var(--text-background-tertiary-default); + font-size: var(--m-font-16); + font-weight: var(--semi-bold); + margin: 16px 0 8px 8px; +} diff --git a/web/chat/member-list-sidebar/role-group-member-list.react.js b/web/chat/member-list-sidebar/role-group-member-list.react.js new file mode 100644 index 000000000..8c784503b --- /dev/null +++ b/web/chat/member-list-sidebar/role-group-member-list.react.js @@ -0,0 +1,50 @@ +// @flow + +import * as React from 'react'; + +import type { SetState } from 'lib/types/hook-types.js'; +import type { + RelativeMemberInfo, + ThreadInfo, +} from 'lib/types/minimally-encoded-thread-permissions-types.js'; + +import css from './role-group-member-list.css'; +import ThreadMember from '../../modals/threads/members/member.react.js'; + +type Props = { + +roleName: string, + +members: $ReadOnlyArray, + +threadInfo: ThreadInfo, + +setOpenMenu: SetState, +}; + +function RoleGroupMemberList(props: Props): React.Node { + const { roleName, members, threadInfo, setOpenMenu } = props; + + const memberList = React.useMemo( + () => + members.map(member => ( + + )), + [setOpenMenu, members, threadInfo], + ); + + const roleGroupMemberList = React.useMemo( + () => ( + <> +
{roleName}
+ {memberList} + + ), + [memberList, roleName], + ); + + return roleGroupMemberList; +} + +export default RoleGroupMemberList;