'use client' import * as React from 'react' import Link from 'next/link' import { signOut } from 'next-auth/react' import { BookOpen, LogOut, Monitor, Moon, Settings, ShieldCheck, Sun, User as UserIcon, } from 'lucide-react' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Button } from '@/components/ui/button' import { initialen } from '@/lib/utils' type Thema = 'hell' | 'dunkel' | 'system' /** * Benutzermenue mit Themenwahl und Abmelden. * * Das Thema wird im localStorage gemerkt und sofort auf gesetzt - * dieselbe Logik wie im Startskript im Layout, damit es beim naechsten * Laden nicht flackert. */ export function BenutzerMenue({ name, email, rolle, }: { name: string email: string rolle: string }) { const [thema, setThema] = React.useState('system') React.useEffect(() => { const gespeichert = (localStorage.getItem('bc-thema') as Thema | null) ?? 'system' setThema(gespeichert) }, []) function themaSetzen(neu: Thema) { setThema(neu) try { localStorage.setItem('bc-thema', neu) } catch { /* Speicher gesperrt - dann gilt die Wahl nur fuer diese Sitzung. */ } const dunkel = neu === 'dunkel' || (neu === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) document.documentElement.classList.toggle('dark', dunkel) document.documentElement.style.colorScheme = dunkel ? 'dark' : 'light' } return (

{name}

{email}

Mein Konto Zweiter Faktor Einstellungen Anleitung Darstellung themaSetzen('hell')}> Hell {thema === 'hell' && ✓} themaSetzen('dunkel')}> Dunkel {thema === 'dunkel' && ✓} themaSetzen('system')}> Wie das System {thema === 'system' && ✓} void signOut({ callbackUrl: '/anmelden' })}> Abmelden ) }