23-01-2026

2026-01-23 17:33:10 +01:00 · 2026-01-23 17:33:10 +01:00 · 854ce02bf6
commit 854ce02bf6
parent 07959c0ba2
166 changed files with 32909 additions and 1262 deletions
--- a/dev/THEME-DEMO-COMPONENTS.md
+++ b/dev/THEME-DEMO-COMPONENTS.md
@ -0,0 +1,186 @@
+# 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')
+```