Team list

Members of a workspace with their status. The badge cuts into the photo, not a ring around it.

Members

6 people

Mara LindPrint editor
Jonas WeberProducer
Aiko TanakaWriter
Lea NovakOwner
Theo BrandtFramer
Ines DuarteGuest

import { createAvatar } from "@reuse-sh/avatars";
import "@reuse-sh/avatars/styles.css";

for (const member of members) {
  const slot = list.querySelector(`[data-member="${member.id}"] .avatar`);
  createAvatar(slot, {
    name: member.name,
    src: member.photo,
    size: 36,
    badge: member.online ? { type: "dot", label: "Online" } : undefined,
  });
}

import { Avatar } from "@reuse-sh/avatars/react";
import "@reuse-sh/avatars/styles.css";

export function MemberRow({ member }) {
  return (
    <li>
      <Avatar
        name={member.name}
        src={member.photo}
        size={36}
        badge={member.online ? { type: "dot", label: "Online" } : undefined}
      />
      <span>{member.name}</span>
    </li>
  );
}