# Section

Eine Section erhöht die Übersichtlichkeit, indem sie den Content in vertikale Teilbereiche mit festen Abständen gliedert. Zwischen mehreren Sections wird automatisch ein Separator eingefügt, um die Bereiche optisch zu trennen.

## Overview

# Playground

Verwende `<Section />`, um eine Section darzustellen. Sie sorgt automatisch für
feste Abstände zwischen den darin platzierten Elementen.

```tsx
import {
  Heading,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Heading>Newsletter</Heading>
  <Text>
    Kommende Releases, neue Features und Tipps rund um dein
    Hosting – wir bringen dir das Wichtigste in dein
    Postfach. Abonniere unseren Newsletter und bleib auf dem
    Laufenden.
  </Text>
</Section>
```

---

# Mehrere Sections

Wenn mehrere Sections untereinander platziert werden, werden sie automatisch
durch einen [Separator](/04-components/structure/separator/overview) getrennt.

```tsx
import {
  Button,
  Header,
  Heading,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<>
  <Section>
    <Header>
      <Heading>Datenbanken</Heading>
      <Button>Datenbank verknüpfen</Button>
    </Header>
    <Text>
      Eine Datenbank, die mit einer App verknüpft ist, kann
      nicht gelöscht werden. Die App nutzt immer die
      verknüpfte Datenbank.
    </Text>
  </Section>
  <Section>
    <Heading>Cronjobs</Heading>
    <Text>
      Ein Cronjob ist immer fest einer App zugeordnet, du
      kannst ihn unter dem Menüpunkt Cronjobs bearbeiten und
      löschen.
    </Text>
  </Section>
</>
```

## Sub-Headings

Sections beginnen in der Regel mit einer
H2-[Heading](/04-components/content/heading/overview). Wenn eine feinere
Unterteilung nötig ist, können Headings auf niedrigerem Level direkt in der
Section platziert werden. Zur optischen Verdeutlichung erhalten Sub-Headings in
der Größe H3 automatisch einen größeren Abstand zum darüberliegenden Content.

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

<Section>
  <Heading>DNS Verwaltung</Heading>
  <Text>
    Da du externe Nameserver nutzt, empfehlen wir dir
    folgende Records bei deinem Provider einzutragen.
  </Text>
  <Heading level={3}>A-Record</Heading>
  <LabeledValue>
    <Label>IPv4-Adresse</Label>
    <InlineCode>12.123.123.12</InlineCode>
  </LabeledValue>
</Section>
```

---

# SectionAction

Die Section verfügt in der rechten oberen Ecke über einen Bereich für Actions –
die sogenannte SectionAction. Dort können ein
[Link](/04-components/navigation/link/overview), ein
[Switch](/04-components/form-controls/switch/overview), ein oder zwei
[Buttons](/04-components/actions/button/overview) oder eine Kombination dieser
Components verwendet werden.

```tsx
import {
  Header,
  Heading,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>Newsletter</Heading>
    <Link href="#">Zur Anmeldung</Link>
  </Header>
  <Text>
    Kommende Releases, neue Features und Tipps rund um dein
    Hosting – wir bringen dir das Wichtigste in dein
    Postfach. Abonniere unseren Newsletter und bleib auf dem
    Laufenden.
  </Text>
</Section>
```

```tsx
import {
  Header,
  Heading,
  Section,
  Switch,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>Autoresponder</Heading>
    <Switch>Aktivieren</Switch>
  </Header>
  <Text>
    Lasse den Autoresponder für dich arbeiten. Er kann
    automatisch auf eingehende E-Mails antworten.
  </Text>
</Section>
```

Es können maximal zwei [Buttons](/04-components/actions/button/overview)
nebeneinander angezeigt werden. Werden mehr als zwei Aktionen benötigt, erhält
die Hauptaktion einen eigenen Button, während alle weiteren in ein
[ContextMenu](/04-components/actions/context-menu/overview) verschoben werden.

```tsx
import {
  Button,
  ColumnLayout,
  Content,
  ContextMenu,
  ContextMenuTrigger,
  CopyButton,
  Header,
  Heading,
  IconContextMenu,
  IconExternalLink,
  Label,
  LabeledValue,
  Link,
  MenuItem,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>Mein Projekt</Heading>

    <ContextMenuTrigger>
      <Button
        variant="soft"
        color="secondary"
        aria-label="Weitere Aktionen anzeigen"
      >
        <IconContextMenu />
      </Button>
      <ContextMenu aria-label="Weitere Aktionen">
        <MenuItem>Datenbank migrieren</MenuItem>
        <MenuItem>Volume migrieren</MenuItem>
      </ContextMenu>
    </ContextMenuTrigger>

    <Button color="danger">Deaktivieren</Button>
  </Header>

  <ColumnLayout>
    <LabeledValue>
      <Label>Projektname</Label>
      <Content>Dolce Vita</Content>
    </LabeledValue>
    <LabeledValue>
      <Label>Short-ID</Label>
      <Content>p-lol3qe</Content>
      <CopyButton text="p-lol3qe" />
    </LabeledValue>
    <LabeledValue>
      <Label>Projektdomain</Label>
      <Link>
        <Text>p-lol3qe.project.space</Text>
        <IconExternalLink />
      </Link>
      <CopyButton text="p-lol3qe.project.space" />
    </LabeledValue>
  </ColumnLayout>
</Section>
```

---

# Kombiniere mit ...

## AlertBadge und Badge

Die [Heading](/04-components/content/heading/overview) kann mit einem
[AlertBadge](/04-components/status/alert-badge/overview) oder einem
[Badge](/04-components/status/badge/overview) ergänzt werden. Dadurch wird der
User schnell über den Status oder über Metadaten des Inhalts einer Section
informiert.

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

<Section>
  <Header>
    <Heading>
      Mein Projekt
      <AlertBadge status="danger">Deaktiviert</AlertBadge>
    </Heading>

    <Button variant="soft" color="secondary">
      Datenbank migrieren
    </Button>
    <Button color="accent">Aktivieren</Button>
  </Header>

  <ColumnLayout>
    <LabeledValue>
      <Label>Projektname</Label>
      <Content>Dolce Vita</Content>
    </LabeledValue>
    <LabeledValue>
      <Label>Short-ID</Label>
      <Content>p-lol3qe</Content>
      <CopyButton text="p-lol3qe" />
    </LabeledValue>
    <LabeledValue>
      <Label>Projektdomain</Label>
      <Link>
        <Text>p-lol3qe.project.space</Text>
        <IconExternalLink />
      </Link>
      <CopyButton text="p-lol3qe.project.space" />
    </LabeledValue>
  </ColumnLayout>
</Section>
```