# LabeledValue

Das LabeledValue zeigt eine statische Information und setzt sie durch ein beschreibendes Label in den passenden Kontext.

## Overview

# Playground

Verwende `<LabeledValue />`, um ein LabeledValue darzustellen. Das LabeledValue
setzt sich aus einem [Label](/04-components/content/label/overview) und dem
`<Content />` zusammen.

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

<LabeledValue>
  <Label>Speicherplatz</Label>
  <Content>20 GB</Content>
</LabeledValue>
```

---

# Kombiniere mit ...

Der Content-Bereich des LabeledValue kann entweder **Text**, **InlineCode** oder
einen **Link** beinhalten. Jeder Content kann zudem durch einen **CopyButton**
ergänzt werden.

## InlineCode

Mit `<InlineCode />` anstelle von `<Content />` kann ein
[InlineCode](/04-components/content/inline-code/overview) angezeigt werden.

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

<LabeledValue>
  <Label>Datenbankserver</Label>
  <InlineCode>
    mysql-kq3v4g.ge-s-hopovh.db.project.host
  </InlineCode>
</LabeledValue>
```

## Link

Nutze einen `<Link />` anstelle von `<Content />`, um einen
[Link](/04-components/navigation/link/overview) anzuzeigen.

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

<LabeledValue>
  <Label>Server</Label>
  <Link>MyServ-01</Link>
</LabeledValue>
```

## CopyButton

Verwende `<CopyButton />` innerhalb des `<LabeledValue />`, um einen
[CopyButton](/04-components/actions/copy-button/overview) am Ende des Contents
anzuzeigen.

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

<LabeledValue>
  <Label>Short-ID</Label>
  <Content>p-wut3uw</Content>
  <CopyButton text="p-wut3uw" />
</LabeledValue>
```


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | - |
| `className` | `string` | - | The elements class name. |


## Guidelines

# Grundlagen

## Best practices

- Wähle kurze, prägnante [Labels](/04-components/content/label/overview), die
  den Wert eindeutig beschreiben.
- Nutze ein [ColumnLayout](/04-components/structure/column-layout/overview), um
  mehrere LabeledValues nebeneinander darzustellen.
- Sortiere LabeledValues nach ihrer Wichtigkeit und bilde sinnvolle
  Gruppierungen.

---

# Anwendung

## Position

- Um viele Informationen übersichtlich darzustellen, verwende LabeledValues
  innerhalb eines
  [ColumnLayouts](/04-components/structure/column-layout/overview).
- Achte auf ein übersichtliches Layout und stelle nicht zu viele Informationen
  in einer Zeile dar.
- Sortiere nach Priorität und bilde sinnvolle Gruppen (z. B. Name und Adresse).

**✅ Do**

Zeige die relevantesten LabeledValues zuerst an und bilde sinnvolle Gruppen.

```tsx
import {
  ColumnLayout,
  Content,
  CopyButton,
  IconExternalLink,
  InlineCode,
  Label,
  LabeledValue,
  Link,
  Text,
} from "@mittwald/flow-react-components";

<ColumnLayout>
  <LabeledValue>
    <Label>Projektname</Label>
    <Content>Dolce Vita</Content>
  </LabeledValue>

  <LabeledValue>
    <Label>Short-ID</Label>
    <Content>p-wut3uw</Content>
    <CopyButton text="p-wut3uw" />
  </LabeledValue>

  <LabeledValue>
    <Label>Projektdomain</Label>
    <Link>
      <Text>p-lol3qe.project.space</Text>
      <IconExternalLink />
    </Link>
    <CopyButton text="p-lol3qe.project.space" />
  </LabeledValue>

  <LabeledValue>
    <Label>Server</Label>
    <Link>Dolce-Server-01</Link>
  </LabeledValue>

  <LabeledValue>
    <Label>A-Record</Label>
    <InlineCode>45.144.187.21</InlineCode>
    <CopyButton text="45.144.187.21" />
  </LabeledValue>

  <LabeledValue>
    <Label>Erstellungsdatum</Label>
    <Content>06.12.2023 um 11:40 Uhr</Content>
  </LabeledValue>
</ColumnLayout>
```

**⛔️ Don't**

Weniger relevante Informationen sollten nicht am Anfang stehen. Versuche
  außerdem, unausgeglichene Designs zu vermeiden.

```tsx
import {
  ColumnLayout,
  Content,
  CopyButton,
  IconExternalLink,
  InlineCode,
  Label,
  LabeledValue,
  Link,
  Text,
} from "@mittwald/flow-react-components";

<ColumnLayout l={[1, 1, 1, 1]}>
  <LabeledValue>
    <Label>Erstellungsdatum</Label>
    <Content>06.12.2023 um 11:40 Uhr</Content>
  </LabeledValue>

  <LabeledValue>
    <Label>Short-ID</Label>
    <Content>p-wut3uw</Content>
    <CopyButton text="p-wut3uw" />
  </LabeledValue>

  <LabeledValue>
    <Label>A-Record</Label>
    <InlineCode>45.144.187.21</InlineCode>
    <CopyButton text="45.144.187.21" />
  </LabeledValue>

  <LabeledValue>
    <Label>Server</Label>
    <Link>Dolce-Server-01</Link>
  </LabeledValue>

  <LabeledValue>
    <Label>Projektname</Label>
    <Content>Dolce Vita</Content>
  </LabeledValue>

  <LabeledValue>
    <Label>Projektdomain</Label>
    <Link>
      <Text>p-lol3qe.project.space</Text>
      <IconExternalLink />
    </Link>
    <CopyButton text="p-lol3qe.project.space" />
  </LabeledValue>
</ColumnLayout>
```

---

## Writing guidelines

### Label

- Achte darauf, dass das [Label](/04-components/content/label/overview) kurz
  (1-3 Wörter) und prägnant ist.
- Es sollte jederzeit vollständig sichtbar bleiben und eine einfache Sprache
  verwenden.