Members 01

// Members 01 from Hirael <https://hirael.com/blocks/saas/members-01>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';
import { Check, MailPlus, MoreHorizontal, Search, UserPlus, Users } from 'lucide-react';

import { cn } from '@/lib/utils';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/registry/hirael/bases/radix/ui/alert-dialog';
import { Avatar, AvatarFallback } from '@/registry/hirael/bases/radix/ui/avatar';
import { Badge } from '@/registry/hirael/bases/radix/ui/badge';
import { Button } from '@/registry/hirael/bases/radix/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/registry/hirael/bases/radix/ui/dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '@/registry/hirael/bases/radix/ui/dropdown-menu';
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/registry/hirael/bases/radix/ui/empty';
import { InputGroup, InputGroupAddon, InputGroupInput } from '@/registry/hirael/bases/radix/ui/input-group';
import { Field, FieldDescription, FieldGroup, FieldLabel } from '@/registry/hirael/bases/radix/ui/field';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/hirael/bases/radix/ui/select';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/hirael/bases/radix/ui/table';
import {
  TagInput,
  TagInputContainer,
  TagInputError,
  TagInputField,
  TagInputTags,
} from '@/registry/hirael/bases/radix/components/tag-input';

type MemberRole = 'Owner' | 'Admin' | 'Member' | 'Viewer';
type MemberStatus = 'Active' | 'Pending' | 'Suspended';

interface Member {
  id: string;
  name: string;
  email: string;
  role: MemberRole;
  status: MemberStatus;
  /** Display string; the block does not format dates. */
  joined: string;
}

interface PendingInvite {
  id: string;
  email: string;
  role: MemberRole;
  invited: string;
}

const ROLES: readonly MemberRole[] = ['Owner', 'Admin', 'Member', 'Viewer'];

const ROLE_HINT: Record<MemberRole, string> = {
  Owner: 'Full access, including billing and deleting the workspace.',
  Admin: 'Manage members and settings. No billing.',
  Member: 'Create and edit anything. No member management.',
  Viewer: 'Read-only.',
};

const STATUS_TONE: Record<MemberStatus, { dot: string; text: string }> = {
  Active: { dot: 'bg-success', text: 'text-success' },
  Pending: {
    dot: 'border border-warning bg-transparent',
    text: 'text-muted-foreground',
  },
  Suspended: { dot: 'bg-muted-foreground', text: 'text-muted-foreground' },
};

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const ENTER =
  'animate-in fade-in slide-in-from-bottom-2 duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none';
const SWAP =
  'animate-in fade-in slide-in-from-bottom-1 duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none';

const stagger = (index: number): React.CSSProperties => ({ animationDelay: `${index * 60}ms` });

const initialsOf = (name: string) => {
  return name
    .split(' ')
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase() ?? '')
    .join('');
};

type MembersProps = React.ComponentProps<'div'>;

const Members = ({ className, ...props }: MembersProps) => {
  return <div data-slot="members" className={cn('flex w-full flex-col gap-4', className)} {...props} />;
};

interface MembersHeaderProps extends Omit<React.ComponentProps<'div'>, 'title'> {
  title: React.ReactNode;
  count?: number;
  description?: React.ReactNode;
  /** Search input, invite button, and anything else on the end side. */
  children?: React.ReactNode;
}

const MembersHeader = ({ title, count, description, className, children, ...props }: MembersHeaderProps) => {
  return (
    <div
      data-slot="members-header"
      className={cn('flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between', className)}
      {...props}
    >
      <div className="flex flex-col gap-0.5">
        <h2 className="flex items-center gap-2 text-base font-semibold tracking-[-0.01em] text-foreground">
          {title}
          {typeof count === 'number' ? (
            <Badge variant="secondary">
              <span className="tabular-nums">{count}</span>
            </Badge>
          ) : null}
        </h2>
        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
      </div>
      {children ? <div className="flex items-center gap-2">{children}</div> : null}
    </div>
  );
};

interface MembersRoleSelectProps {
  value: MemberRole;
  onValueChange?: (role: MemberRole) => void;
  disabled?: boolean;
  /** Roles a user may pick. Defaults to everything but Owner. */
  roles?: readonly MemberRole[];
  size?: 'sm' | 'default';
  className?: string;
  id?: string;
  'aria-label'?: string;
}

const MembersRoleSelect = ({
  value,
  onValueChange,
  disabled,
  roles = ROLES.filter((r) => r !== 'Owner'),
  size = 'sm',
  className,
  id,
  'aria-label': ariaLabel,
}: MembersRoleSelectProps) => {
  const options = roles.includes(value) ? roles : [value, ...roles];

  return (
    <Select value={value} onValueChange={(next) => onValueChange?.(next as MemberRole)} disabled={disabled}>
      <SelectTrigger
        id={id}
        size={size}
        aria-label={ariaLabel}
        data-slot="members-role-select"
        className={cn('w-32', className)}
      >
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        {options.map((role) => (
          <SelectItem key={role} value={role}>
            {role}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
};

interface MembersStatusProps extends React.ComponentProps<'span'> {
  status: MemberStatus;
}

const MembersStatus = ({ status, className, ...props }: MembersStatusProps) => {
  const tone = STATUS_TONE[status];

  return (
    <span
      data-slot="members-status"
      data-status={status.toLowerCase()}
      className={cn('inline-flex items-center gap-1.5 text-xs uppercase', tone.text, className)}
      {...props}
    >
      <span aria-hidden className={cn('size-1.5 rounded-full', tone.dot)} />
      {status}
    </span>
  );
};

type MembersTableProps = React.ComponentProps<'div'>;

const MembersTable = ({ className, children, ...props }: MembersTableProps) => {
  return (
    <div
      data-slot="members-table"
      className={cn('overflow-hidden rounded-lg border border-border bg-card text-card-foreground', className)}
      {...props}
    >
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>
              <span className="text-xs font-normal text-muted-foreground uppercase">Member</span>
            </TableHead>
            <TableHead>
              <span className="text-xs font-normal text-muted-foreground uppercase">Role</span>
            </TableHead>
            <TableHead className="hidden sm:table-cell">
              <span className="text-xs font-normal text-muted-foreground uppercase">Status</span>
            </TableHead>
            <TableHead className="hidden md:table-cell">
              <span className="text-xs font-normal text-muted-foreground uppercase">Joined</span>
            </TableHead>
            <TableHead>
              <span className="sr-only">Actions</span>
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>{children}</TableBody>
      </Table>
    </div>
  );
};

interface MembersRowProps {
  member: Member;
  /** Marks the row as the signed-in user; they cannot remove themselves. */
  isYou?: boolean;
  onRoleChange?: (role: MemberRole) => void;
  onResend?: () => void;
  onRemove?: () => void;
  className?: string;
}

const MembersRow = ({ member, isYou = false, onRoleChange, onResend, onRemove, className }: MembersRowProps) => {
  const isOwner = member.role === 'Owner';
  const roleLocked = isOwner || isYou;
  const [confirmOpen, setConfirmOpen] = React.useState(false);

  return (
    <TableRow data-slot="members-row" data-status={member.status.toLowerCase()} className={className}>
      <TableCell>
        <span className="flex items-center gap-3">
          <Avatar>
            <AvatarFallback>
              <span className="text-xs font-medium text-foreground">{initialsOf(member.name)}</span>
            </AvatarFallback>
          </Avatar>
          <span className="flex min-w-0 flex-col">
            <span className="flex items-center gap-1.5 truncate font-medium text-foreground">
              {member.name}
              {isYou ? <span className="text-xs text-muted-foreground uppercase">you</span> : null}
            </span>
            <span className="truncate text-xs text-muted-foreground">{member.email}</span>
          </span>
        </span>
      </TableCell>
      <TableCell>
        {roleLocked ? (
          <Badge variant={isOwner ? 'secondary' : 'outline'} className="h-8">
            {member.role}
          </Badge>
        ) : (
          <MembersRoleSelect value={member.role} onValueChange={onRoleChange} aria-label={`Role for ${member.name}`} />
        )}
      </TableCell>
      <TableCell className="hidden sm:table-cell">
        <MembersStatus status={member.status} />
      </TableCell>
      <TableCell className="hidden md:table-cell">
        <span className="text-xs text-muted-foreground tabular-nums">{member.joined}</span>
      </TableCell>
      <TableCell className="text-end">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" className="size-7" aria-label={`Actions for ${member.name}`}>
              <MoreHorizontal className="size-3.5" aria-hidden />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-48">
            <DropdownMenuSub>
              <DropdownMenuSubTrigger disabled={roleLocked}>Change role</DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                <DropdownMenuRadioGroup
                  value={member.role}
                  onValueChange={(next) => onRoleChange?.(next as MemberRole)}
                >
                  {ROLES.filter((r) => r !== 'Owner').map((role) => (
                    <DropdownMenuRadioItem key={role} value={role}>
                      {role}
                    </DropdownMenuRadioItem>
                  ))}
                </DropdownMenuRadioGroup>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
            <DropdownMenuItem disabled={member.status !== 'Pending'} onSelect={onResend}>
              Resend invite
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem variant="destructive" disabled={roleLocked} onSelect={() => setConfirmOpen(true)}>
              Remove from team
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
        <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
          <AlertDialogContent data-slot="members-remove-dialog">
            <AlertDialogHeader>
              <AlertDialogTitle>Remove {member.name}?</AlertDialogTitle>
              <AlertDialogDescription>
                They lose access to the workspace right away. You can invite them again later.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Keep member</AlertDialogCancel>
              <AlertDialogAction
                variant="destructive"
                onClick={() => {
                  setConfirmOpen(false);
                  onRemove?.();
                }}
              >
                Remove
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </TableCell>
    </TableRow>
  );
};

interface MembersInviteDialogProps {
  /** Receives the validated emails and the chosen role. */
  onInvite?: (emails: string[], role: MemberRole) => void;
  /** Already-taken addresses, rejected with a hint instead of a duplicate row. */
  existingEmails?: readonly string[];
  defaultRole?: MemberRole;
  trigger?: React.ReactNode;
}

const MembersInviteDialog = ({
  onInvite,
  existingEmails = [],
  defaultRole = 'Member',
  trigger,
}: MembersInviteDialogProps) => {
  const [open, setOpen] = React.useState(false);
  const [emails, setEmails] = React.useState<string[]>([]);
  const [role, setRole] = React.useState<MemberRole>(defaultRole);
  const roleId = React.useId();
  const emailsId = React.useId();

  const taken = React.useMemo(() => new Set(existingEmails.map((e) => e.toLowerCase())), [existingEmails]);

  const validate = React.useCallback(
    (candidate: string) => {
      if (!EMAIL_RE.test(candidate)) return 'That is not an email address.';
      if (taken.has(candidate.toLowerCase())) {
        return `${candidate} is already on the team.`;
      }

      return true as const;
    },
    [taken],
  );

  const reset = () => {
    setEmails([]);
    setRole(defaultRole);
  };

  const submit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (emails.length === 0) return;
    onInvite?.(emails, role);
    setOpen(false);
    reset();
  };

  return (
    <Dialog
      open={open}
      onOpenChange={(next) => {
        setOpen(next);
        if (!next) reset();
      }}
    >
      <DialogTrigger asChild>
        {trigger ?? (
          <Button type="button" size="sm">
            <UserPlus className="size-3.5" aria-hidden />
            Invite
          </Button>
        )}
      </DialogTrigger>
      <DialogContent data-slot="members-invite-dialog" className="sm:max-w-md">
        <form onSubmit={submit} className="flex flex-col gap-5">
          <DialogHeader>
            <DialogTitle>Invite people</DialogTitle>
            <DialogDescription>They get an email with a link that works for 7 days.</DialogDescription>
          </DialogHeader>

          <FieldGroup className="gap-5">
            <Field className="gap-2">
              <FieldLabel htmlFor={emailsId}>Email addresses</FieldLabel>
              <TagInput
                value={emails}
                onValueChange={setEmails}
                validate={validate}
                commitKeys={['Enter', ',', ' ']}
                splitOn={/[,\s]+/}
              >
                <TagInputContainer>
                  <TagInputTags />
                  <TagInputField id={emailsId} autoComplete="off" placeholder="name@hirael.com, another@hirael.com" />
                </TagInputContainer>
                <TagInputError />
              </TagInput>
              <FieldDescription>
                Press Enter, comma, or space after each address. Paste a list to add several at once.
              </FieldDescription>
            </Field>

            <Field className="gap-2">
              <FieldLabel htmlFor={roleId}>Role</FieldLabel>
              <MembersRoleSelect id={roleId} value={role} onValueChange={setRole} size="default" className="w-full" />
              <FieldDescription>{ROLE_HINT[role]}</FieldDescription>
            </Field>
          </FieldGroup>

          <DialogFooter>
            <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={emails.length === 0}>
              <MailPlus className="size-3.5" aria-hidden />
              {emails.length > 1 ? `Send ${emails.length} invites` : 'Send invite'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};

interface MembersPendingProps extends React.ComponentProps<'section'> {
  count?: number;
}

const MembersPending = ({ count, className, children, ...props }: MembersPendingProps) => {
  return (
    <section
      data-slot="members-pending"
      className={cn('overflow-hidden rounded-lg border border-border bg-card text-card-foreground', className)}
      {...props}
    >
      <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-2.5">
        <span className="text-xs text-muted-foreground uppercase">
          Pending invites
          {typeof count === 'number' ? <span className="ms-2 text-foreground">({count})</span> : null}
        </span>
      </div>
      <ul className="divide-y divide-border">{children}</ul>
    </section>
  );
};

interface MembersPendingItemProps extends Omit<React.ComponentProps<'li'>, 'children'> {
  invite: PendingInvite;
  onResend?: () => void;
  onRevoke?: () => void;
  /** Shows a "Sent" confirmation in place of the resend button. */
  resent?: boolean;
}

const MembersPendingItem = ({
  invite,
  onResend,
  onRevoke,
  resent = false,
  className,
  ...props
}: MembersPendingItemProps) => {
  return (
    <li
      data-slot="members-pending-item"
      className={cn('flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3', className)}
      {...props}
    >
      <Avatar>
        <AvatarFallback>
          <MailPlus className="size-3.5" aria-hidden />
        </AvatarFallback>
      </Avatar>
      <span className="flex min-w-0 flex-1 flex-col">
        <span className="truncate text-sm font-medium text-foreground">{invite.email}</span>
        <span className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground uppercase">
          <span>{invite.role}</span>
          <span aria-hidden className="text-border">
            |
          </span>
          <span className="truncate">Invited {invite.invited}</span>
        </span>
      </span>
      <MembersStatus status="Pending" className="hidden sm:inline-flex" />
      <span className="flex items-center gap-1">
        <Button type="button" variant="ghost" size="sm" onClick={onResend} disabled={resent} className="min-w-20">
          {resent ? (
            <span className={cn(SWAP, 'flex items-center gap-1.5 text-success')}>
              <Check className="size-3.5" aria-hidden />
              Sent
            </span>
          ) : (
            'Resend'
          )}
        </Button>
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button type="button" variant="ghost" size="sm">
              Revoke
            </Button>
          </AlertDialogTrigger>
          <AlertDialogContent data-slot="members-revoke-dialog">
            <AlertDialogHeader>
              <AlertDialogTitle>Revoke the invite for {invite.email}?</AlertDialogTitle>
              <AlertDialogDescription>The link in their email stops working.</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Keep invite</AlertDialogCancel>
              <AlertDialogAction variant="destructive" onClick={onRevoke}>
                Revoke
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </span>
    </li>
  );
};

interface MembersEmptyProps extends Omit<React.ComponentProps<typeof Empty>, 'title'> {
  title?: React.ReactNode;
  description?: React.ReactNode;
  action?: React.ReactNode;
}

const MembersEmpty = ({
  title = 'No members yet',
  description = 'Invite a teammate to get started.',
  action,
  className,
  ...props
}: MembersEmptyProps) => {
  return (
    <Empty data-slot="members-empty" className={className} {...props}>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Users aria-hidden />
        </EmptyMedia>
        <EmptyTitle>{title}</EmptyTitle>
        <EmptyDescription>{description}</EmptyDescription>
      </EmptyHeader>
      {action ? <EmptyContent>{action}</EmptyContent> : null}
    </Empty>
  );
};

export {
  Members,
  MembersHeader,
  MembersInviteDialog,
  MembersTable,
  MembersRow,
  MembersRoleSelect,
  MembersStatus,
  MembersPending,
  MembersPendingItem,
  MembersEmpty,
  type Member,
  type MemberRole,
  type MemberStatus,
  type PendingInvite,
};

const MEMBERS: readonly Member[] = [
  {
    id: 'm1',
    name: 'Mohammad Shehadeh',
    email: 'hello@mohammadshehadeh.com',
    role: 'Owner',
    status: 'Active',
    joined: 'Jan 12, 2025',
  },
  {
    id: 'm2',
    name: 'Lena Fischer',
    email: 'lena@hirael.com',
    role: 'Admin',
    status: 'Active',
    joined: 'Feb 3, 2025',
  },
  {
    id: 'm3',
    name: 'Omar Haddad',
    email: 'omar@hirael.com',
    role: 'Member',
    status: 'Active',
    joined: 'Mar 19, 2025',
  },
  {
    id: 'm4',
    name: 'Priya Raman',
    email: 'priya@hirael.com',
    role: 'Member',
    status: 'Active',
    joined: 'May 7, 2025',
  },
  {
    id: 'm5',
    name: 'Tomás Herrera',
    email: 'tomas@hirael.com',
    role: 'Viewer',
    status: 'Active',
    joined: 'Jun 22, 2025',
  },
  {
    id: 'm6',
    name: 'Sara Nakamura',
    email: 'sara@hirael.com',
    role: 'Member',
    status: 'Suspended',
    joined: 'Aug 1, 2025',
  },
];

const PENDING: readonly PendingInvite[] = [
  {
    id: 'p1',
    email: 'nadia@hirael.com',
    role: 'Member',
    invited: '2 days ago',
  },
  { id: 'p2', email: 'jules@hirael.com', role: 'Viewer', invited: '6 days ago' },
];

const CURRENT_USER_ID = 'm1';

const Members01 = () => {
  const [members, setMembers] = React.useState<readonly Member[]>(MEMBERS);
  const [pending, setPending] = React.useState<readonly PendingInvite[]>(PENDING);
  const [query, setQuery] = React.useState('');
  const [resent, setResent] = React.useState<ReadonlySet<string>>(new Set());
  const searchRef = React.useRef<HTMLInputElement>(null);

  const q = query.trim().toLowerCase();
  const visible = q
    ? members.filter(
        (m) =>
          m.name.toLowerCase().includes(q) || m.email.toLowerCase().includes(q) || m.role.toLowerCase().includes(q),
      )
    : members;

  const existingEmails = [...members.map((m) => m.email), ...pending.map((p) => p.email)];

  const setRole = (id: string, role: MemberRole) =>
    setMembers((list) => list.map((m) => (m.id === id ? { ...m, role } : m)));

  const remove = (id: string) => setMembers((list) => list.filter((m) => m.id !== id));

  const resend = (id: string) =>
    setResent((set) => {
      const next = new Set(set);
      next.add(id);

      return next;
    });

  const revoke = (id: string) => setPending((list) => list.filter((p) => p.id !== id));

  const invite = (emails: string[], role: MemberRole) =>
    setPending((list) => [
      ...emails.map((email, i) => ({
        id: `p-${Date.now()}-${i}`,
        email,
        role,
        invited: 'just now',
      })),
      ...list,
    ]);

  return (
    <section data-slot="members-01-block" className="min-h-svh w-full bg-background">
      <div className="mx-auto w-full max-w-4xl px-4 py-8 sm:px-6 sm:py-10">
        <Members>
          <MembersHeader
            title="Members"
            count={members.length}
            description="Everyone with access to the Hirael workspace."
            className={ENTER}
          >
            <InputGroup className="h-8 w-full sm:w-56">
              <InputGroupAddon align="inline-start">
                <Search className="size-3.5" aria-hidden />
              </InputGroupAddon>
              <InputGroupInput
                ref={searchRef}
                type="search"
                placeholder="Search members…"
                aria-label="Search members"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key !== 'Escape' || !query) return;
                  e.preventDefault();
                  setQuery('');
                }}
              />
            </InputGroup>
            <MembersInviteDialog onInvite={invite} existingEmails={existingEmails} />
          </MembersHeader>

          {visible.length === 0 ? (
            <MembersEmpty
              className={SWAP}
              title="No matching members"
              description={
                <>
                  Nothing matched <span className="text-foreground">&ldquo;{query.trim()}&rdquo;</span>. Try a name, an
                  email, or a role.
                </>
              }
              action={
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => {
                    setQuery('');
                    searchRef.current?.focus();
                  }}
                >
                  Clear search
                </Button>
              }
            />
          ) : (
            <MembersTable style={stagger(1)} className={ENTER}>
              {visible.map((m) => (
                <MembersRow
                  key={m.id}
                  member={m}
                  isYou={m.id === CURRENT_USER_ID}
                  onRoleChange={(role) => setRole(m.id, role)}
                  onRemove={() => remove(m.id)}
                />
              ))}
            </MembersTable>
          )}

          {pending.length > 0 ? (
            <MembersPending count={pending.length} style={stagger(2)} className={ENTER}>
              {pending.map((p) => (
                <MembersPendingItem
                  key={p.id}
                  invite={p}
                  className={p.invited === 'just now' ? SWAP : undefined}
                  resent={resent.has(p.id)}
                  onResend={() => resend(p.id)}
                  onRevoke={() => revoke(p.id)}
                />
              ))}
            </MembersPending>
          ) : null}
        </Members>
      </div>
    </section>
  );
};

export default Members01;