# AvatarStack

Ein AvatarStack zeigt mehrere Avatare in einer horizontalen Gruppierung.

```tsx
import {
  Avatar,
  AvatarStack,
  Initials,
} from "@mittwald/flow-react-components";

<AvatarStack>
  <Avatar>
    <Initials>Max Mustermann</Initials>
  </Avatar>
  <Avatar>
    <Initials>John Doe</Initials>
  </Avatar>
  <Avatar>
    <Initials>Gillian Gopher</Initials>
  </Avatar>
</AvatarStack>
```

---

# Best Practices

- Zeige nicht zu viele [Avatare](/04-components/content/avatar) gleichzeitig.
  Empfohlen sind höchstens fünf; für die verbleibende Anzahl nutzt du die
  Property `totalCount`.
- Zeige bei Bedarf per Klick mehr Informationen an. Nutze auf den einzelnen
  Avataren eine [ContextualHelp](/04-components/overlays/contextual-help) mit
  dem Namen und auf dem `totalCount`-Avatar ein
  [Modal](/04-components/overlays/modal) mit allen Usern in einer Liste.
- Halte die Avatare konsistent zur Darstellung an anderen Stellen. Nutze etwa
  das hochgeladene Profilbild statt eines generischen
  User-[Icons](/04-components/content/icon).

---

# Sizes

```tsx
import {
  Avatar,
  AvatarStack,
  Initials,
} from "@mittwald/flow-react-components";

<>
  <AvatarStack size="xs">
    <Avatar>
      <Initials>Max Mustermann</Initials>
    </Avatar>
    <Avatar>
      <Initials>John Doe</Initials>
    </Avatar>
  </AvatarStack>
  <AvatarStack size="s">
    <Avatar>
      <Initials>Max Mustermann</Initials>
    </Avatar>
    <Avatar>
      <Initials>John Doe</Initials>
    </Avatar>
  </AvatarStack>
  <AvatarStack size="m">
    <Avatar>
      <Initials>Max Mustermann</Initials>
    </Avatar>
    <Avatar>
      <Initials>John Doe</Initials>
    </Avatar>
  </AvatarStack>
  <AvatarStack size="l">
    <Avatar>
      <Initials>Max Mustermann</Initials>
    </Avatar>
    <Avatar>
      <Initials>John Doe</Initials>
    </Avatar>
  </AvatarStack>
</>
```

---

# Total Count

Über die Property `totalCount` lässt sich die Gesamtzahl der
[Avatare](/04-components/content/avatar) angeben. Ist `totalCount` größer als
die Anzahl der angezeigten Avatare, wird ein zusätzlicher Counter mit der
verbleibenden Anzahl angezeigt.

```tsx
import {
  Avatar,
  AvatarStack,
  Initials,
} from "@mittwald/flow-react-components";

<AvatarStack totalCount={20}>
  <Avatar>
    <Initials>Max Mustermann</Initials>
  </Avatar>
  <Avatar>
    <Initials>John Doe</Initials>
  </Avatar>
  <Avatar>
    <Initials>Gillian Gopher</Initials>
  </Avatar>
</AvatarStack>
```

---

# Klickbar

Mache Avatare interaktiv, um mehr Informationen anzuzeigen. Im Beispiel öffnet
jeder einzelne Avatar eine
[ContextualHelp](/04-components/overlays/contextual-help) mit dem Namen, während
der `totalCount`-Avatar über `onCountPress` ein
[Modal](/04-components/overlays/modal) mit allen Usern öffnet.

```tsx
import {
  Align,
  Avatar,
  AvatarStack,
  Button,
  ContextualHelp,
  ContextualHelpTrigger,
  Content,
  Heading,
  Initials,
  Modal,
  Section,
  Text,
  useModalController,
} from "@mittwald/flow-react-components";

export default () => {
  const controller = useModalController();

  const users = [
    "Max Mustermann",
    "John Doe",
    "Gillian Gopher",
    "Erika Musterfrau",
    "Jane Doe",
  ];

  return (
    <>
      <AvatarStack
        totalCount={users.length}
        onCountPress={controller.open}
      >
        {users.slice(0, 3).map((name) => (
          <ContextualHelpTrigger key={name}>
            <Button>
              <Avatar>
                <Initials>{name}</Initials>
              </Avatar>
            </Button>
            <ContextualHelp>
              <Text>{name}</Text>
            </ContextualHelp>
          </ContextualHelpTrigger>
        ))}
      </AvatarStack>

      <Modal controller={controller}>
        <Heading>Beteiligte User</Heading>
        <Content>
          <Section>
            {users.map((name) => (
              <Align key={name}>
                <Avatar>
                  <Initials>{name}</Initials>
                </Avatar>
                <Text>{name}</Text>
              </Align>
            ))}
          </Section>
        </Content>
      </Modal>
    </>
  );
}
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `totalCount` | `number` | - | The total count of items, as avatars should only be displayed for the first view |
| `size` | `"s" \| "xs" \| "m" \| "l"` | `"m"` | The size of the avatars inside the stack. |
| `className` | `string` | - | The elements class name. |
| `children` | `ReactNode` | - | - |

### Events

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `onCountPress` | `(() => void)` | - | The onPress action of the additional items count element |