86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "@/contexts/auth-context";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import { LogOut, User, Settings, LogIn } from "lucide-react";
|
|
|
|
export function AuthHeader() {
|
|
const router = useRouter();
|
|
const { user, logout } = useAuth();
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
router.push("/");
|
|
};
|
|
|
|
if (!user) {
|
|
return (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="gap-2 bg-transparent"
|
|
onClick={() => router.push("/login")}
|
|
>
|
|
<LogIn className="h-4 w-4" />
|
|
Sign In
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarFallback className="bg-primary text-primary-foreground">
|
|
{user.name.charAt(0).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-56">
|
|
<div className="flex items-center justify-start gap-2 p-2">
|
|
<div className="flex flex-col space-y-1 leading-none">
|
|
<p className="font-medium">{user.name}</p>
|
|
<p className="text-xs text-muted-foreground">{user.email}</p>
|
|
</div>
|
|
</div>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/profile" className="cursor-pointer gap-2">
|
|
<User className="h-4 w-4" />
|
|
Profile
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link
|
|
href="/profile?tab=preferences"
|
|
className="cursor-pointer gap-2"
|
|
>
|
|
<Settings className="h-4 w-4" />
|
|
Preferences
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
onClick={handleLogout}
|
|
className="cursor-pointer gap-2 text-destructive"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
Logout
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|