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


## Develop

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


## Guidelines

# Grundlagen

## Best practices

Achte bei der Verwendung eines AvatarStacks darauf, dass ...

- nicht zu viele [Avatare](/04-components/content/avatar/overview) gleichzeitig
  angezeigt werden. Empfohlen ist eine maximale Anzahl von 5 Avataren. Danach
  sollte die Property `totalCount` genutzt werden, um die verbleibende Anzahl
  der Avatare darzustellen.
- die Avatare bei Bedarf mehr Informationen durch Anklicken erhalten. Zum
  Beispiel kann ein [Modal](/04-components/overlays/modal/overview) geöffnet
  werden, das weitere Informationen zum Benutzerprofil enthält.
- die angezeigten Avatare konsistent bleiben und die gleiche Darstellung
  verwenden wie an anderen Stellen. Beispielsweise sollte das hochgeladene
  Profilbild eines Users angezeigt werden und nicht ein generisches
  User-[Icon](/04-components/content/icon/overview).

## Verwendung

Verwende einen AvatarStack, um mehrere Avatare kompakt und übersichtlich zu
gruppieren (z. B. welche User an einem Projekt beteiligt sind).