# Detailseite

```tsx
import {
  Breadcrumb,
  Button,
  ColumnLayout,
  Content,
  ContextMenu,
  ContextMenuTrigger,
  Flex,
  Header,
  Heading,
  IconChevronDown,
  IconDelete,
  IconEdit,
  IconExternalLink,
  IconPassword,
  Label,
  LabeledValue,
  LayoutCard,
  Link,
  MenuItem,
  Modal,
  ModalTrigger,
  ProgressBar,
  Section,
  Switch,
  Tab,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
  TabNavigation,
  Tabs,
  TabTitle,
  Text,
} from "@mittwald/flow-react-components";

export default () => {
  return (
    <Flex direction="column" gap="m">
      <Flex direction="column">
        <Breadcrumb color="dark">
          <Link>Projekt</Link>
          <Link>E-Mails</Link>
          <Link>E-Mail-Details</Link>
        </Breadcrumb>
        <Flex justify="space-between" align="end">
          <Heading color="dark" level={1}>
            max@mustermann.de
          </Heading>
          <ContextMenuTrigger>
            <Button variant="outline" color="dark">
              <Text>Aktionen</Text>
              <IconChevronDown />
            </Button>
            <ContextMenu placement="bottom end">
              <MenuItem>
                <IconEdit />
                <Text>E-Mail-Adresse bearbeiten</Text>
              </MenuItem>
              <MenuItem>
                <IconPassword />
                <Text>Passwort ändern</Text>
              </MenuItem>
              <MenuItem>
                <IconExternalLink />
                <Text>mittwald Webmailer</Text>
              </MenuItem>
              <MenuItem>
                <IconDelete />
                <Text>Löschen</Text>
              </MenuItem>
            </ContextMenu>
          </ContextMenuTrigger>
        </Flex>
      </Flex>
      <LayoutCard>
        <TabNavigation aria-label="E-Mail-Navigation">
          <Link href="#" aria-current="page">
            Allgemein
          </Link>
          <Link href="#">Weiterleitungen</Link>
          <Link href="#">Autoresponder</Link>
        </TabNavigation>
        <Section>
          <Header>
            <Heading>E-Mail-Adresse</Heading>
            <ModalTrigger>
              <Button variant="soft" color="secondary">
                Passwort ändern
              </Button>
              <Modal>
                <Heading>Passwort ändern</Heading>
                <Content>
                  <Text>...</Text>
                </Content>
              </Modal>
            </ModalTrigger>
            <ModalTrigger>
              <Button>E-Mail-Adresse bearbeiten</Button>
              <Modal>
                <Heading>E-Mail-Adresse bearbeiten</Heading>
                <Content>
                  <Text>...</Text>
                </Content>
              </Modal>
            </ModalTrigger>
          </Header>
          <ColumnLayout>
            <LabeledValue>
              <Label>E-Mail-Adresse</Label>
              <Text>max@mustermann.de</Text>
            </LabeledValue>
            <LabeledValue>
              <Label>Webmailer</Label>
              <Link target="_blank">
                mittwald Webmailer
              </Link>
            </LabeledValue>
          </ColumnLayout>
        </Section>
        <Section>
          <Header>
            <Heading>Speicherplatz</Heading>
            <ModalTrigger>
              <Button variant="soft" color="secondary">
                Bearbeiten
              </Button>
              <Modal>
                <Heading>Speicherplatz bearbeiten</Heading>
                <Content>
                  <Text>...</Text>
                </Content>
              </Modal>
            </ModalTrigger>
          </Header>
          <Text>
            Die E-Mail-Adresse verfügt über einen
            Speicherplatz zum Empfangen und Speichern von
            E-Mails. Wir empfehlen dir, mindestens 2 GB zu
            reservieren.
          </Text>
          <ProgressBar
            formatOptions={{
              style: "unit",
              unit: "gigabyte",
            }}
            size="l"
            showMaxValue
            maxValue={2}
            value={1}
            status="success"
          >
            <Label>Speicherplatz</Label>
          </ProgressBar>
        </Section>
        <Section>
          <Heading>Verbindungsinformationen</Heading>
          <Tabs>
            {["IMAP", "POP3", "SMTP"].map(
              (connectionType) => (
                <Tab
                  key={connectionType}
                  id={connectionType}
                >
                  <TabTitle>{connectionType}</TabTitle>
                  <Table
                    aria-label={`Verbindungsinformationen ${connectionType}`}
                  >
                    <TableHeader>
                      <TableColumn></TableColumn>
                      <TableColumn></TableColumn>
                    </TableHeader>
                    <TableBody>
                      <TableRow>
                        <TableCell rowHeader>
                          Benutzername
                        </TableCell>
                        <TableCell>
                          max@mustermann.de
                        </TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell rowHeader>
                          {connectionType} Port
                        </TableCell>
                        <TableCell>...</TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell rowHeader>
                          {connectionType} Postausgang
                        </TableCell>
                        <TableCell>...</TableCell>
                      </TableRow>
                    </TableBody>
                  </Table>
                </Tab>
              ),
            )}
          </Tabs>
        </Section>
        <Section>
          <Header>
            <Heading>Spamschutz</Heading>
            <Switch defaultSelected>
              <Label>Aktivieren</Label>
            </Switch>
          </Header>
          <Text>
            Der Spamfilter schützt dich vor ungewollten
            E-Mails. Niemand will Müll in seinem Postfach,
            daher empfehlen wir den Spamschutz immer
            aktiviert zu lassen.
          </Text>
        </Section>
      </LayoutCard>
    </Flex>
  );
}
```

---

# Verwendung

Verwende die Detailseite, wenn sich Nutzer in **ein einzelnes Objekt** vertiefen
und es bearbeiten sollen – sobald zu einem Datensatz mehr gehört als eine Zeile
in einer Liste. Geht es um viele gleichartige Objekte nebeneinander, führt die
[Übersichtsseite](https://flow.mittwald.de/templates/seiten/uebersichtsseite) dorthin.

---

# Aufbau

- **Content Header** – Eine [Heading](https://flow.mittwald.de/components/content/heading) als H1
  benennt das Objekt und macht klar, in welchem Bereich sich der Nutzer
  befindet. Eine [Breadcrumb](https://flow.mittwald.de/components/navigation/breadcrumb) ergänzt die
  Orientierung, navigiert im Seitenbaum und führt schnell auf übergeordnete
  Ebenen zurück; ihre Einträge bleiben möglichst generisch.
- **Aktionsmenü** – Ein [Button](https://flow.mittwald.de/components/actions/button) mit einem
  [ContextMenu](https://flow.mittwald.de/components/actions/context-menu) bündelt die wichtigsten
  Aktionen des Objekts und dient den Nutzern als Schnellzugriff.
- **Content** – Eine [LayoutCard](https://flow.mittwald.de/components/structure/layout-card) ist die
  Grundlage jeder Detailseite. Sie bildet den äußeren Container für den Inhalt
  und stellt Hintergrund und Padding bereit.
- **Themenblöcke** – [Sections](https://flow.mittwald.de/components/structure/section) gliedern den
  Content in Themenblöcke mit eigener H2-Überschrift und eigenen Aktionen im
  Header. Sie lassen sich beliebig verschachteln, um auch umfangreiche Inhalte
  strukturiert darzustellen. Ordne sie nach Wichtigkeit und staffle Details nach
  unten.
- **Tab-Unterseiten** (optional) – Bei umfangreichen Objekten verteilt eine
  [TabNavigation](https://flow.mittwald.de/components/navigation/tab-navigation) die Themenblöcke auf
  gleichrangige Unterseiten. Nutzer wechseln zwischen ihnen, ohne den Kontext
  des Objekts zu verlieren.