# Theme Demo Komponenten

## 📋 Übersicht

Die Theme-Demo-Seite wurde in wiederverwendbare Livewire-Komponenten unterteilt, um bessere Wartbarkeit und Übersichtlichkeit zu gewährleisten.

## 🧩 Komponenten-Struktur

### 1. **ThemeInfo** (`app/Livewire/Web/Components/ThemeInfo.php`)
- **Zweck:** Zeigt aktuelle Domain-Konfiguration und Theme-Details
- **Features:**
  - Domain-Name und Theme-Informationen
  - Primär- und Sekundärfarben mit Farbvorschau
  - Schriftarten-Informationen
  - URL-Konfiguration

### 2. **LogoDemo** (`app/Livewire/Web/Components/LogoDemo.php`)
- **Zweck:** Demonstriert Logo-Varianten für das aktuelle Theme
- **Features:**
  - Positives Logo auf hellem Hintergrund
  - Negatives Logo auf dunklem Hintergrund
  - Automatische Logo-Auswahl basierend auf Theme

### 3. **ColorDemo** (`app/Livewire/Web/Components/ColorDemo.php`)
- **Zweck:** Zeigt die Hauptfarben des aktuellen Themes
- **Features:**
  - Primary-Farbe mit Hex-Code
  - Secondary-Farbe mit Hex-Code
  - Accent-Farbe (immer Neutral)
  - Farbvorschau-Karten

### 4. **ButtonDemo** (`app/Livewire/Web/Components/ButtonDemo.php`)
- **Zweck:** Demonstriert Button-Styles und Hover-Effekte
- **Features:**
  - Primary, Secondary und Accent Buttons
  - Hover-Effekte mit Übergängen
  - Theme-spezifische Farbwechsel

### 5. **ThemeSwitcher** (`app/Livewire/Web/Components/ThemeSwitcher.php`)
- **Zweck:** Bietet verschiedene Wege zum Theme-Switching
- **Features:**
  - Domain-basierte Links
  - URL-Parameter-Links
  - Pfad-basierte Links für lokale Entwicklung

### 6. **DemoSection** (`app/Livewire/Web/Components/DemoSection.php`)
- **Zweck:** Wiederverwendbarer Container für Demo-Bereiche
- **Features:**
  - Einheitliches Layout
  - Titel und Beschreibung
  - Flexible Inhalte

## 🎯 Verwendung

### Haupt-Theme-Demo-View
```blade
@extends('web.layouts.web-master')

@section('content')
    <div class="min-h-screen bg-background">
        <livewire:web.components.header />
        
        <main class="section-padding">
            <div class="container-padding">
                <livewire:web.components.theme-info />
                <livewire:web.components.logo-demo />
                <livewire:web.components.color-demo />
                <livewire:web.components.button-demo />
                <livewire:web.components.theme-switcher />
            </div>
        </main>
        
        <livewire:web.components.footer />
    </div>
@endsection
```

### Einzelne Komponenten verwenden
```blade
<!-- Nur Logo-Demo -->
<livewire:web.components.logo-demo />

<!-- Nur Farb-Demo -->
<livewire:web.components.color-demo />

<!-- Nur Button-Demo -->
<livewire:web.components.button-demo />
```

## 🔧 Wartbarkeit

### Vorteile der Komponenten-Struktur:

1. **Modularität:** Jede Komponente hat einen spezifischen Zweck
2. **Wiederverwendbarkeit:** Komponenten können in anderen Views verwendet werden
3. **Wartbarkeit:** Änderungen an einer Komponente betreffen nur diese
4. **Testbarkeit:** Jede Komponente kann einzeln getestet werden
5. **Übersichtlichkeit:** Haupt-View ist sehr sauber und lesbar

### Datei-Struktur:
```
app/Livewire/Web/Components/
├── ThemeInfo.php
├── LogoDemo.php
├── ColorDemo.php
├── ButtonDemo.php
├── ThemeSwitcher.php
└── DemoSection.php

resources/views/livewire/web/components/
├── theme-info.blade.php
├── logo-demo.blade.php
├── color-demo.blade.php
├── button-demo.blade.php
├── theme-switcher.blade.php
└── demo-section.blade.php
```

## 🚀 Erweiterungen

### Neue Demo-Komponenten hinzufügen:

1. **Komponente erstellen:**
```php
// app/Livewire/Web/Components/NewDemo.php
<?php
namespace App\Livewire\Web\Components;
use Livewire\Component;

class NewDemo extends Component
{
    public function render()
    {
        return view('livewire.web.components.new-demo');
    }
}
```

2. **View erstellen:**
```blade
<!-- resources/views/livewire/web/components/new-demo.blade.php -->
<div class="text-center mb-16">
    <h2 class="text-section-title mb-8">Neue Demo</h2>
    <!-- Demo-Inhalt -->
</div>
```

3. **In Haupt-View einbinden:**
```blade
<livewire:web.components.new-demo />
```

### DemoSection verwenden:
```blade
<livewire:web.components.demo-section 
    title="Meine Demo" 
    description="Beschreibung der Demo"
    component="my-demo" />
```

## 📝 Best Practices

1. **Einheitliche Struktur:** Alle Demo-Komponenten folgen dem gleichen Layout-Pattern
2. **Responsive Design:** Alle Komponenten sind mobile-optimiert
3. **Accessibility:** Semantische HTML-Struktur und ARIA-Labels
4. **Performance:** Minimale JavaScript-Dependencies
5. **Theme-Konsistenz:** Verwendung der Theme-Helper für dynamische Inhalte

## 🔍 Debugging

### Komponenten einzeln testen:
```bash
# Spezifische Komponente testen
php artisan livewire:make ComponentName

# Komponenten-Status prüfen
php artisan livewire:list
```

### Theme-Helper testen:
```php
// In tinker
php artisan tinker
>>> \App\Helpers\ThemeHelper::getPrimaryColor()
>>> \App\Helpers\ThemeHelper::getLogoPath('positive')
```