Gumtree UI

MemberList

Right sidebar container for the member list. Also exports MemberSection for grouped headings.

Import

import { MemberList } from "@gumtree/ui/chat/MemberList";

Props

PropTypeDefaultDescription
childrenComponentChildren-MemberSection groups and MemberRow entries

Examples

Grouped Members

MemberList with Online, Bots, and Offline sections.

Online — 3
B
brendanadmin
A
aliceadmin
B
bob
Bots — 1
G
gumtreebot
Offline — 2
D
dave
E
eve
<MemberList>
  <MemberSection label="Online — 3">
    <MemberRow name="brendan" status="online" avatarColor="#89b4fa"
      nameColor="#1a5a9a" nameBold role="admin" />
    <MemberRow name="alice" status="online" avatarColor="#cba6f7" role="admin" />
    <MemberRow name="bob" status="online" avatarColor="#a6e3a1" />
  </MemberSection>
  <MemberSection label="Bots — 1" class="mt-3">
    <MemberRow name="gumtree" status="online" avatarColor="#eee" role="bot" />
  </MemberSection>
  <MemberSection label="Offline — 2" class="mt-3">
    <MemberRow name="dave" status="offline" avatarColor="#ddd" opacity={0.5} />
    <MemberRow name="eve" status="offline" avatarColor="#ddd" opacity={0.5} />
  </MemberSection>
</MemberList>