63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { authClient } from '@/lib/auth-client';
|
|
import Link from 'next/link';
|
|
|
|
export function Header() {
|
|
const { data: session, isPending: loading } = authClient.useSession();
|
|
|
|
const handleSignOut = async () => {
|
|
try {
|
|
await authClient.signOut({});
|
|
} catch (error) {
|
|
console.error('Sign out failed:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg">
|
|
<div className="px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center py-5">
|
|
<Link href="/" className="text-2xl font-bold hover:text-blue-100 transition-colors">
|
|
TTS Dialektannotations-Plattform
|
|
</Link>
|
|
|
|
<nav className="flex items-center gap-6">
|
|
{loading ? (
|
|
<span className="text-sm text-blue-100">Laden...</span>
|
|
) : session ? (
|
|
<div className="flex items-center gap-6">
|
|
<div className="text-right">
|
|
<p className="text-xs text-blue-100 uppercase tracking-wide">Willkommen zurück</p>
|
|
<p className="text-sm font-semibold">{session.user?.email}</p>
|
|
</div>
|
|
{(session.user as any)?.admin && (
|
|
<Link
|
|
href="/admin"
|
|
className="px-4 py-2 bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700 text-white font-semibold rounded-lg transition-all duration-200 transform hover:scale-105"
|
|
>
|
|
Admin
|
|
</Link>
|
|
)}
|
|
<button
|
|
onClick={handleSignOut}
|
|
className="px-4 py-2 bg-red-600 hover:bg-red-700 active:bg-red-800 text-white font-semibold rounded-lg transition-all duration-200 transform hover:scale-105"
|
|
>
|
|
Abmelden
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<Link
|
|
href="/user/sign-in"
|
|
className="px-5 py-2 bg-green-500 hover:bg-green-600 active:bg-green-700 text-white font-semibold rounded-lg transition-all duration-200 transform hover:scale-105"
|
|
>
|
|
Anmelden
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|