export function GroupsStory()

in src/stories/ActionList2/fixtures.stories.tsx [239:291]
50 lines of code
2 McCabe index (conditional complexity)

export function GroupsStory(): JSX.Element {
  const [assignees, setAssignees] = React.useState(users.slice(0, 1))

  const toggleAssignee = (assignee: typeof users[number]) => {
    const assigneeIndex = assignees.findIndex(a => a.login === assignee.login)

    if (assigneeIndex === -1) setAssignees([...assignees, assignee])
    else setAssignees(assignees.filter((_, index) => index !== assigneeIndex))
  }

  return (
    <>
      <h1>Groups</h1>
      <ErsatzOverlay>
        <ActionList selectionVariant="multiple" showDividers aria-label="Select reviewers">
          <ActionList.Group title="Suggestions" variant="filled" role="listbox">
            {users.slice(0, 2).map(user => (
              <ActionList.Item
                key={user.login}
                role="option"
                selected={Boolean(assignees.find(assignee => assignee.login === user.login))}
                onSelect={() => toggleAssignee(user)}
              >
                <ActionList.LeadingVisual>
                  <Avatar src={`https://github.com/${user.login}.png`} />
                </ActionList.LeadingVisual>
                {user.login}
                <ActionList.Description>{user.name}</ActionList.Description>
                <ActionList.Description variant="block">Recently edited these files</ActionList.Description>
              </ActionList.Item>
            ))}
          </ActionList.Group>
          <ActionList.Group title="Everyone" variant="filled" role="listbox">
            {users.slice(2).map(user => (
              <ActionList.Item
                role="option"
                key={user.login}
                selected={Boolean(assignees.find(assignee => assignee.login === user.login))}
                onSelect={() => toggleAssignee(user)}
              >
                <ActionList.LeadingVisual>
                  <Avatar src={`https://github.com/${user.login}.png`} />
                </ActionList.LeadingVisual>
                {user.login}
                <ActionList.Description>{user.name}</ActionList.Description>
              </ActionList.Item>
            ))}
          </ActionList.Group>
        </ActionList>
      </ErsatzOverlay>
    </>
  )
}