# AvatarStack

Ein AvatarStack zeigt mehrere Avatare in einer horizontalen Gruppierung.

## Overview

# Playground

Lege den `<AvatarStack />` um mehrere
[Avatare](/04-components/content/avatar/overview), um diese zu gruppieren.

```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>
```

---

# Total Count

Es wird empfohlen, gleichzeitig höchstens 5
[Avatare](/04-components/content/avatar/overview) anzuzeigen. Weitere Avatare
können über einen Counter dargestellt werden, indem die Property `totalCount`
verwendet wird. 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

Mit `onPress` lassen sich Avatare klickbar machen, sodass zu den jeweiligen
Avataren beispielsweise weitere Informationen im
[Modal](/04-components/overlays/modal/overview) angezeigt werden können.

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

<AvatarStack
  onCountPress={() => console.log("count clicked")}
>
  <Button onPress={() => console.log("avatar clicked")}>
    <Avatar>
      <Initials>Max Mustermann</Initials>
    </Avatar>
  </Button>
  <Button onPress={() => console.log("avatar clicked")}>
    <Avatar>
      <Initials>John Doe</Initials>
    </Avatar>
  </Button>
  <Button onPress={() => console.log("avatar clicked")}>
    <Avatar>
      <Initials>Gillian Gopher</Initials>
    </Avatar>
  </Button>
</AvatarStack>
```

---

# Sizes

AvatarStacks sind in den Sizes **Extra Small, Small, Medium** und **Large**
verfügbar.

```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>
</>
```