WAfM components

Participant card

One shared card, composed with translated labels and caller-provided content.

Participant card playground

Choose a section and swap its content without changing the card API.

Ebene 2

Fähigkeiten

Platzhalter für die Visualisierung.

Properties

Section

Composed content

Content states belong to the caller. The card never chooses a chart or fetches data. New visualizations remain placeholders.

All sections

Use participantSections to keep each level paired with its section. Labels live in participant-translations.ts; callers pass stable identifiers instead of display strings.

Ebene 1

Selbstbild

Inhalt der Auswertung

Ebene 2

Fähigkeiten

Inhalt der Auswertung

Ebene 3

Persönlichkeitsmerkmale

Inhalt der Auswertung

Ebene 4

Motive

Inhalt der Auswertung

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

ParticipantCard

import { ParticipantCard, ParticipantCardHeader, ParticipantCardLevel, ParticipantCardTitle, ParticipantCardContent } from '@wafm/ui/components/participant-card'
import { participantSections } from '@wafm/ui/lib/participant-sections'

<ParticipantCard>
  <ParticipantCardHeader>
    <ParticipantCardLevel level={participantSections.abilities.level} />
    <ParticipantCardTitle section="abilities" />
  </ParticipantCardHeader>
  <ParticipantCardContent>{content}</ParticipantCardContent>
</ParticipantCard>

children / className / HTML div props: Shared Card surface with compact participant styling. Compose content freely; the card has no chart, loading, error, permission, or data-fetching logic.

ParticipantCardHeader

<ParticipantCardHeader>
  <ParticipantCardLevel level={2} />
  <ParticipantCardTitle section="abilities" />
</ParticipantCardHeader>

children / className / HTML div props: A wrapping row aligned on the text baseline. Accepts level, title, and any additional header content.

ParticipantCardLevel

<ParticipantCardLevel level={2} />

level: Required ParticipantLevel: 1 | 2 | 3 | 4. Formats the complete German phrase “Ebene {level}” from participant-translations.ts.
className / HTML span props: Supports presentation and accessibility attributes. The translated label owns children.

ParticipantCardTitle

<ParticipantCardTitle section="personality" />

section: Required ParticipantSection: self-image | abilities | personality | motives. Looks up Selbstbild, Fähigkeiten, Persönlichkeitsmerkmale, or Motive in the German dictionary.
id / className / HTML h2 props: Renders an h2 inside CardTitle. Supply an id when another element needs to reference this heading. The translated title owns children.

ParticipantCardContent

<ParticipantCardContent>
  <p role="status">Noch keine Ergebnisse.</p>
</ParticipantCardContent>

children / className / HTML div props: Flexible content slot. The caller supplies a chart, placeholder, empty state, or recovery action; no content variant prop is needed.