b2in/THEME-DEMO-COMPONENTS.md

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

@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

<!-- 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:

// 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:

<!-- 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:

<livewire:web.components.new-demo />

DemoSection verwenden:

<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:

# Spezifische Komponente testen
php artisan livewire:make ComponentName

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

Theme-Helper testen:

// In tinker
php artisan tinker
>>> \App\Helpers\ThemeHelper::getPrimaryColor()
>>> \App\Helpers\ThemeHelper::getLogoPath('positive')