# Rating

Die Rating Component dient zur visuellen Darstellung einer Bewertungsskala von 0 bis 5 Sternen. Sie wird häufig eingesetzt, um Bewertungen auf einen Blick verständlich zu machen.

## Overview

# Playground

Verwende `<Rating />`, um ein Rating anzubieten. Um die Barrierefreiheit zu
gewährleisten, wird in der Rating Component automatisch ein entsprechendes
ARIA-Label für die einzelnen Rating-Stufen generiert.

```tsx
import {
  Label,
  Rating,
} from "@mittwald/flow-react-components";

<Rating>
  <Label>Bewertung</Label>
</Rating>
```

---

# Sizes

Es stehen die Größen **Medium** oder **Small** zur Verfügung.

```tsx
import { Rating } from "@mittwald/flow-react-components";

<>
  <Rating defaultValue={2} aria-label="Bewertung" />
  <Rating
    size="s"
    defaultValue={2}
    aria-label="Bewertung"
  />
</>
```

---

# Readonly

Verwende `isReadOnly`, wenn du die Rating-Komponente nur zur Darstellung
verwenden möchtest.

```tsx
import { Rating } from "@mittwald/flow-react-components";

<Rating value={2} isReadOnly aria-label="Bewertung" />
```

---

# Alternative Icons

Über die Properties `iconEmpty` und `iconFilled` können benutzerdefinierte
[Icons](/04-components/content/icons/overview) gesetzt werden.

```tsx
import {
  Icon,
  Rating,
} from "@mittwald/flow-react-components";
import {
  IconLeaf,
  IconLeafFilled,
} from "@tabler/icons-react";

<Rating
  aria-label="Bewertung"
  iconEmpty={
    <Icon>
      <IconLeaf />
    </Icon>
  }
  iconFilled={
    <Icon status="success">
      <IconLeafFilled />
    </Icon>
  }
  defaultValue={2}
/>
```

---

# Kombiniere mit ...

## BigNumber

Das Rating kann mit einer
[BigNumber](/04-components/data-visualisation/big-number/overview) kombiniert
werden, um den Wert der BigNumber visuell besser einordnen zu können.

```tsx
import {
  BigNumber,
  Flex,
  Rating,
  Text,
} from "@mittwald/flow-react-components";

<Flex direction="column" gap="s" align="center">
  <BigNumber>
    <Text>80%</Text>
    <Text>Performance</Text>
  </BigNumber>
  <Rating aria-label="Performance" value={4} isReadOnly />
</Flex>
```

## AccentBox

Zur visuellen Hervorhebung kann das Rating innerhalb einer
[AccentBox](/04-components/structure/accent-box/overview) angezeigt werden.

```tsx
import {
  AccentBox,
  BigNumber,
  ColumnLayout,
  Flex,
  Rating,
  Text,
} from "@mittwald/flow-react-components";

<ColumnLayout>
  <AccentBox>
    <Flex direction="column" gap="s" align="center">
      <BigNumber>
        <Text>250 ms</Text>
        <Text>Dateioperationen</Text>
      </BigNumber>
      <Rating aria-label="Bewertung" value={4} isReadOnly />
      <Text>
        <small>Geringer Optimierungsbedarf</small>
      </Text>
    </Flex>
  </AccentBox>
  <AccentBox>
    <Flex direction="column" gap="xs" align="center">
      <BigNumber>
        <Text>100 ms</Text>
        <Text>Serveroperationen</Text>
      </BigNumber>
      <Rating aria-label="Bewertung" value={2} isReadOnly />
      <Text>
        <small>Optimierungsbedarf</small>
      </Text>
    </Flex>
  </AccentBox>
</ColumnLayout>
```