# Komponenten-Dokumentation

Diese Dokumentation beschreibt alle wiederverwendbaren Blade-Komponenten für die Presseecho und Businessportal24 Themes.

## Inhaltsverzeichnis
1. [Layout-Komponenten](#layout-komponenten)
2. [Navigation-Komponenten](#navigation-komponenten)
3. [Content-Komponenten](#content-komponenten)
4. [Card-Komponenten](#card-komponenten)
5. [Verwendungsbeispiele](#verwendungsbeispiele)

---

## Layout-Komponenten

### Content-Layout
**Pfad:** `resources/views/components/web/content-layout.blade.php`

Hauptlayout für Unterseiten mit optionaler Sidebar.

**Props:**
- `$sidebar` (slot): Sidebar-Inhalt (optional)
- `$sidebarPosition` (string): Position der Sidebar - `'left'` oder `'right'` (default: `'right'`)

**Beispiel ohne Sidebar:**
```blade
<x-web.content-layout>
    <article>
        <!-- Ihr Content hier -->
    </article>
</x-web.content-layout>
```

**Beispiel mit Sidebar:**
```blade
<x-web.content-layout>
    <x-slot name="sidebar">
        <x-web.sidebar-widget title="Filter">
            <!-- Sidebar-Inhalte -->
        </x-web.sidebar-widget>
    </x-slot>
    
    <article>
        <!-- Hauptcontent -->
    </article>
</x-web.content-layout>
```

### Page Header
**Pfad:** `resources/views/components/web/page-header.blade.php`

Header für Unterseiten mit Titel, Subtitle und optionalem Bild.

**Props:**
- `$title` (string, required): Hauptüberschrift
- `$subtitle` (string, optional): Untertitel
- `$meta` (slot, optional): Meta-Informationen (Badges, Datum, etc.)
- `$image` (string, optional): URL für Header-Bild
- `$compact` (bool): Kompakte Version (default: `false`)

**Beispiel:**
```blade
<x-web.page-header 
    title="Die Zukunft der KI"
    subtitle="Exklusive Einblicke in die Herausforderungen">
    <x-slot name="meta">
        <span class="badge badge-primary">Exklusiv-Interview</span>
        <span>17. Oktober 2024</span>
    </x-slot>
</x-web.page-header>
```

---

## Navigation-Komponenten

### Main Navigation
**Pfad:** `resources/views/components/web/main-navigation.blade.php`

Sticky Navigation für verschiedene Themes.

**Props:**
- `$theme` (string): Theme-Name - `'presseecho'` oder `'businessportal24'` (default: `'presseecho'`)
- `$items` (array, optional): Custom Navigation-Items

**Beispiel Standard:**
```blade
<x-web.main-navigation theme="presseecho" />
```

**Beispiel Custom Items:**
```blade
<x-web.main-navigation 
    theme="presseecho"
    :items="[
        ['label' => 'Kategorien', 'url' => '/kategorien'],
        ['label' => 'Autoren', 'url' => '/autoren'],
    ]" 
/>
```

### Breadcrumb
**Pfad:** `resources/views/components/web/breadcrumb.blade.php`

Breadcrumb-Navigation für Unterseiten.

**Props:**
- `$items` (array, required): Array von Breadcrumb-Items

**Beispiel:**
```blade
<x-web.breadcrumb :items="[
    ['label' => 'Themendossiers', 'url' => '/themendossiers'],
    ['label' => 'KI & Innovation', 'url' => '/themendossiers/ki'],
    ['label' => 'Artikel-Titel']
]" />
```

---

## Content-Komponenten

### Section Header
**Pfad:** `resources/views/components/web/section-header.blade.php`

Header für Content-Sections.

**Props:**
- `$title` (string, required): Section-Titel
- `$subtitle` (string, optional): Subtitle
- `$size` (string): Größe - `'small'`, `'medium'`, `'large'` (default: `'medium'`)

**Beispiel:**
```blade
<x-web.section-header 
    title="Neueste Analysen"
    subtitle="Fundierte Einschätzungen von Branchenexperten"
    size="medium" 
/>
```

### Hero Banner
**Pfad:** `resources/views/components/web/hero-banner.blade.php`

Hero-Section für Startseiten.

**Props:**
- `$theme` (string): Theme-Name (default: `'presseecho'`)
- `$title` (slot): Hero-Titel
- `$subtitle` (slot): Hero-Subtitle

**Beispiel:**
```blade
<x-web.hero-banner theme="presseecho">
    <x-slot name="title">
        Exklusive Fachmeldungen <span class="opacity-50">für Ihre Recherche</span>
    </x-slot>
    <x-slot name="subtitle">
        Exklusive Wirtschaftsinformationen für Journalisten
    </x-slot>
</x-web.hero-banner>
```

### Sidebar Widget
**Pfad:** `resources/views/components/web/sidebar-widget.blade.php`

Widget-Container für Sidebar-Elemente.

**Props:**
- `$title` (string, optional): Widget-Titel
- `$icon` (slot, optional): Icon als SVG

**Beispiel:**
```blade
<x-web.sidebar-widget title="Über den Autor">
    <div class="flex items-start gap-4">
        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)]">
            <!-- Avatar -->
        </div>
        <div>
            <h4 class="font-semibold">Dr. Maria Schmidt</h4>
            <p class="text-sm">Expertin für KI</p>
        </div>
    </div>
</x-web.sidebar-widget>
```

---

## Card-Komponenten

### Article Card
**Pfad:** `resources/views/components/web/article-card.blade.php`

Standard-Karte für Artikel.

**Props:**
- `$article` (array, required): Artikel-Daten

**Erforderliche Array-Struktur:**
```php
$article = [
    'badge' => 'Analyse',
    'badgeType' => 'primary', // primary, secondary, success, warning
    'category' => 'Industrie 4.0',
    'categoryBadgeType' => 'secondary',
    'date' => '2024-10-16',
    'dateFormatted' => '16. Okt 2024',
    'title' => 'Artikeltitel',
    'teaser' => 'Kurzbeschreibung...',
    'author' => 'Thomas Müller',
    'authorInitials' => 'TM',
    'image' => 'https://...',
];
```

**Beispiel:**
```blade
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
    @foreach ($articles as $article)
        <x-web.article-card :article="$article" />
    @endforeach
</div>
```

### Dossier Card
**Pfad:** `resources/views/components/web/dossier-card.blade.php`

Karte für Themendossiers.

**Props:**
- `$dossier` (array, required): Dossier-Daten

**Erforderliche Array-Struktur:**
```php
$dossier = [
    'title' => 'KI in der Industrie',
    'description' => 'Alle Facetten der künstlichen Intelligenz...',
    'articleCount' => 12,
    'image' => 'https://...',
];
```

**Beispiel:**
```blade
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
    @foreach ($dossiers as $dossier)
        <x-web.dossier-card :dossier="$dossier" />
    @endforeach
</div>
```

### Highlight Card
**Pfad:** `resources/views/components/web/highlight-card.blade.php`

Karte für Highlights (wird im Slider verwendet).

**Props:**
- `$highlight` (array, required): Highlight-Daten

**Erforderliche Array-Struktur:**
```php
$highlight = [
    'badge' => 'Exklusiv-Interview',
    'badgeType' => 'primary',
    'industry' => 'KI & Innovation',
    'date' => '17. Oktober 2024',
    'title' => 'Die Zukunft der KI',
    'text' => 'Beschreibungstext...',
    'author' => 'Dr. Maria Schmidt',
    'authorRole' => 'Expertin für KI',
    'initials' => 'MS',
    'image' => 'https://...',
];
```

### Highlights Slider
**Pfad:** `resources/views/components/web/highlights-slider.blade.php`

Interaktiver Slider für Highlights mit Navigation und Keyboard-Support.

**Props:**
- `$highlights` (array, required): Array von Highlight-Daten
- `$theme` (string): Theme-Name (default: `'presseecho'`)

**Beispiel:**
```blade
@php
    $highlights = [
        [
            'badge' => 'Exklusiv-Interview',
            'badgeType' => 'primary',
            'industry' => 'KI & Innovation',
            'date' => '17. Oktober 2024',
            'title' => 'Die Zukunft der KI',
            'text' => 'Interview-Text...',
            'author' => 'Dr. Maria Schmidt',
            'authorRole' => 'Expertin',
            'initials' => 'MS',
            'image' => 'https://...',
        ],
        // ... weitere Highlights
    ];
@endphp

<x-web.highlights-slider :highlights="$highlights" theme="presseecho" />
```

---

## Verwendungsbeispiele

### Beispiel 1: Artikel-Detailseite

```blade
@extends('web.layouts.web-master')

@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950">
    <livewire:web.burger-menu />
    <livewire:web.header />
    
    <x-web.main-navigation theme="presseecho" />
    
    <div class="container mx-auto px-4">
        <x-web.breadcrumb :items="[
            ['label' => 'Themendossiers', 'url' => '/themendossiers'],
            ['label' => 'KI & Innovation', 'url' => '/ki'],
            ['label' => 'Artikel-Titel']
        ]" />
    </div>
    
    <x-web.page-header 
        title="Die Zukunft der KI"
        subtitle="Exklusive Einblicke">
        <x-slot name="meta">
            <span class="badge badge-primary">Interview</span>
            <span>17. Oktober 2024</span>
        </x-slot>
    </x-web.page-header>
    
    <x-web.content-layout>
        <x-slot name="sidebar">
            <x-web.sidebar-widget title="Über den Autor">
                <!-- Author Info -->
            </x-web.sidebar-widget>
        </x-slot>
        
        <article class="prose prose-lg">
            <!-- Artikel-Content -->
        </article>
    </x-web.content-layout>
    
    <livewire:web.footer />
</main>
@endsection
```

### Beispiel 2: Kategorie-Übersicht

```blade
@extends('web.layouts.web-master')

@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950">
    <livewire:web.burger-menu />
    <livewire:web.header />
    
    <x-web.main-navigation theme="presseecho" />
    
    <div class="container mx-auto px-4">
        <x-web.breadcrumb :items="[
            ['label' => 'Themendossiers', 'url' => '/themendossiers'],
            ['label' => 'KI & Innovation']
        ]" />
    </div>
    
    <x-web.page-header 
        title="KI & Innovation"
        subtitle="Alle Artikel zum Thema"
        image="https://..." />
    
    <x-web.content-layout>
        <x-slot name="sidebar">
            <x-web.sidebar-widget title="Filter">
                <!-- Filter-Optionen -->
            </x-web.sidebar-widget>
        </x-slot>
        
        <div class="grid md:grid-cols-2 gap-6">
            @foreach ($articles as $article)
                <x-web.article-card :article="$article" />
            @endforeach
        </div>
    </x-web.content-layout>
    
    <livewire:web.footer />
</main>
@endsection
```

---

## CSS-Klassen

### Badge-Typen
- `badge` - Basis-Badge
- `badge-primary` - Primary-Farbe
- `badge-secondary` - Secondary-Farbe
- `badge-success` - Erfolg (Grün)
- `badge-warning` - Warnung (Gelb)

### Button-Typen
- `btn-primary` - Primary-Button mit Gradient
- `btn-secondary` - Secondary-Button
- `pagination-btn` - Pagination-Button
- `pagination-active` - Aktive Pagination-Seite

### Card-Typen
- `card` - Basis-Karte
- `card-hover` - Karte mit Hover-Effekt
- `highlight-card` - Highlight-Karte (Slider)

### Layout-Klassen
- `section-light-bg` - Heller Section-Hintergrund
- `section-gradient-bg` - Gradient Section-Hintergrund
- `page-header` - Page-Header-Container
- `page-header-compact` - Kompakter Page-Header

---

## Theme-Anpassung

Alle Komponenten respektieren die Theme-Variablen:

```css
:root {
    --primary: /* HSL-Werte */
    --secondary: /* HSL-Werte */
    --color-primary: /* Hex-Werte */
    --color-secondary: /* Hex-Werte */
}
```

**Presseecho:**
- Primary: `#345636` (Grün)
- Secondary: `#6b8f71` (Hellgrün)

**Businessportal24:**
- Primary: `#cf3628` (Rot)
- Secondary: `#f0834a` (Orange)

---

## Best Practices

1. **Komponenten-Verwendung:**
   - Nutzen Sie immer die wiederverwendbaren Komponenten
   - Vermeiden Sie duplizierte HTML-Strukturen
   - Verwenden Sie Props für dynamische Inhalte

2. **CSS-Klassen:**
   - Nutzen Sie die vordefinierten CSS-Klassen aus `shared-styles.css`
   - Vermeiden Sie Inline-Styles, wo möglich
   - Theme-spezifische Overrides in den jeweiligen Theme-CSS-Dateien

3. **Datenstruktur:**
   - Halten Sie sich an die definierten Array-Strukturen
   - Verwenden Sie `@php`-Blöcke für Daten-Definitionen
   - Dokumentieren Sie Custom-Properties

4. **Accessibility:**
   - Verwenden Sie semantische HTML-Tags
   - Fügen Sie `aria-label` zu interaktiven Elementen hinzu
   - Testen Sie die Keyboard-Navigation

---

## Support

Bei Fragen zur Verwendung der Komponenten:
- Siehe Beispiele unter `/resources/views/web/examples/`
- Konsultieren Sie diese Dokumentation
- Prüfen Sie die bestehenden Implementierungen in `presseecho.blade.php`