export function Groups()

in src/stories/ActionList2/examples.stories.tsx [177:230]


export function Groups(): 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 & Descriptions</h1>

      <p>Grouped content with labels and description. This patterns appears in pull requests to pick a reviewer.</p>

      <ActionList selectionVariant="multiple" showDividers aria-label="Select reviewers">
        <ActionList.Group title="Suggestions" 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" 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>
    </>
  )
}