Spaces:
Runtime error
Runtime error
File size: 3,817 Bytes
80d0777 a3a9068 80d0777 a3a9068 80d0777 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | "use client";
import { useSession, authClient } from "@/lib/auth-client";
import { useRouter } from "next/navigation";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { LogOut, User, LayoutDashboard, Settings } from "lucide-react";
import Link from "next/link";
import { ModeToggle } from "@/components/mode-toggle";
export function UserNav() {
const { data: session } = useSession();
const router = useRouter();
if (!session) return null;
const handleSignOut = async () => {
await authClient.signOut({
fetchOptions: {
onSuccess: () => {
router.push("/");
},
},
});
};
const user = session.user;
const initials = user.name
?.split(" ")
.map((n) => n[0])
.join("")
.toUpperCase() || "U";
return (
<div className="flex items-center gap-3">
<ModeToggle />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="relative h-8 w-8 rounded-full hover:bg-transparent p-0">
<Avatar className="h-8 w-8 border-2 border-primary/50 transition-all hover:border-primary ring-2 ring-primary/10">
<AvatarImage src={user.image || ""} alt={user.name || "User"} />
<AvatarFallback className="bg-primary text-primary-foreground font-bold">
{initials}
</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 glass border-white/10" align="end" forceMount>
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">{user.name}</p>
<p className="text-xs leading-none text-muted-foreground">
{user.email}
</p>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator className="bg-white/10" />
<DropdownMenuItem asChild className="focus:bg-white/10 cursor-pointer">
<Link href="/dashboard" className="flex w-full items-center">
<LayoutDashboard className="mr-2 h-4 w-4" />
<span>Dashboard</span>
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild className="focus:bg-white/10 cursor-pointer">
<Link href="/dashboard/settings" className="flex w-full items-center">
<Settings className="mr-2 h-4 w-4" />
<span>Settings</span>
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator className="bg-white/10" />
<DropdownMenuItem
onClick={handleSignOut}
className="focus:bg-red-500/10 text-red-500 focus:text-red-500 cursor-pointer"
>
<LogOut className="mr-2 h-4 w-4" />
<span>Log out</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}
|