bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add Role Switcher component to styleguide with detailed usage instructions

Browse Source 
- Introduced RoleSwitcher component to the styleguide, allowing users to switch between different roles (individual, educator, company).
- Enhanced the styleguide with a live example, design features, and component usage instructions for better clarity and usability.
- Updated layout to include a new section for the Role Switcher, improving overall navigation and user experience.
This commit is contained in:
Bastian Masanek
2025-11-02 09:24:36 +01:00
parent f4d47b8399
commit e55c7613cd
1 changed files with 72 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
app/pages/internal/styleguide.vue
View File

@@ -6,6 +6,7 @@
*/
import { AlertCircle, CheckCircle } from 'lucide-vue-next'
import RoleSwitcher from '@/components/navigation/RoleSwitcher.vue'
definePageMeta({
layout: 'styleguide',
@@ -727,7 +728,7 @@ const copyCode = async (code: string) => {
</div>
<!-- Product Detail Demo Link -->
<div class="card-glass">
<div class="card-glass mb-8">
<h3 class="text-2xl font-semibold mb-4 text-white">Product Detail Page</h3>
<p class="text-white/90 mb-6">
Vollständige Produktdetailseite für Jahreskarten mit Hero-Image, Preis- und Verfügbarkeitsanzeige,
@@ -739,6 +740,76 @@ const copyCode = async (code: string) => {
</NuxtLink>
</div>
</div>
<!-- Role Switcher Dropdown -->
<div class="card-glass">
<h3 class="text-2xl font-semibold mb-4 text-white">Role Switcher Dropdown</h3>
<p class="text-white/90 mb-6">
Rollen-Auswahl-Dropdown für Benutzer. Ermöglicht das Wechseln zwischen verschiedenen Benutzerrollen
(Privatperson, Pädagoge, Firma). Der Button zeigt die aktuelle Rolle und öffnet ein Dropdown-Menü mit allen verfügbaren Optionen.
</p>
<!-- Live Example -->
<div class="mb-6 p-6 bg-purple-darker/50 rounded-xl border border-white/10">
<p class="text-sm text-white/70 mb-4">Live-Beispiel (interaktiv):</p>
<div class="flex justify-center">
<RoleSwitcher />
</div>
</div>
<!-- Design Features -->
<div class="bg-white/5 p-6 rounded-lg mb-6">
<h4 class="text-lg font-semibold text-white mb-4">Design Features</h4>
<ul class="space-y-2 text-white/90 text-sm">
<li class="flex items-start gap-2">
<span class="mt-1 text-experimenta-accent">✓</span>
<span><strong>Button-Style:</strong> Transparenter Hintergrund mit weißem Border, Glassmorphism-Effekt</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-1 text-experimenta-accent">✓</span>
<span><strong>Kontext-Label:</strong> "Du kaufst als:" (nur Desktop, versteckt auf Mobile)</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-1 text-experimenta-accent">✓</span>
<span><strong>Rolle mit Icon:</strong> Zeigt aktuelle Rolle mit passendem Icon (User, GraduationCap, Building2)</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-1 text-experimenta-accent">✓</span>
<span><strong>Dropdown-Breite:</strong> Fixe Breite von 312px für konsistentes Layout</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-1 text-experimenta-accent">✓</span>
<span><strong>Menü-Items:</strong> Große, klickbare Items (py-3) mit Icon, Titel und Beschreibung</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-1 text-experimenta-accent">✓</span>
<span><strong>Aktive Rolle:</strong> Markiert mit grünem Check-Icon und lila Hintergrund</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-1 text-experimenta-accent">✓</span>
<span><strong>Deaktivierte Rollen:</strong> Opacity 60%, "Demnächst" Badge, cursor-not-allowed</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-1 text-experimenta-accent">✓</span>
<span><strong>Footer-Hinweis:</strong> Informationstext mit Emoji am Ende des Dropdowns</span>
</li>
</ul>
</div>
<!-- Component Usage -->
<details class="bg-white/5 p-4 rounded-lg">
<summary class="cursor-pointer text-white/90 font-semibold">Show Component Code</summary>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;!-- Import component --&gt;
&lt;script setup&gt;
import RoleSwitcher from '@/components/navigation/RoleSwitcher.vue'
&lt;/script&gt;
&lt;!-- Use in template --&gt;
&lt;template&gt;
&lt;RoleSwitcher /&gt;
&lt;/template&gt;</code></pre>
</details>
</div>
</section>
<!-- Footer -->