身份验证
配置 Next-Auth
备注
具体内容可参考Authentication
Refactor NavBar
/app/Navbar.tsx
/app/Navbar.tsx
"use client";
import { Avatar, Box, DropdownMenu, Flex, Text } from "@radix-ui/themes";
import classNames from "classnames";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { AiFillBug } from "react-icons/ai";
import { Skeleton } from "@/app/components";
const NavBar = () => {
return (
<nav className="border-b mb-5 px-5 py-5">
<Flex align="center" justify="between">
<NavLinks />
<Avator />
</Flex>
</nav>
);
};
export default NavBar;
const links = [
{ label: <AiFillBug />, href: "/" },
{ label: "DashBoard", href: "/dashboard" },
{ label: "Issues", href: "/issues" },
];
const NavLinks = () => {
const currentPath = usePathname();
return (
<ul className="flex gap-6 items-center">
{links.map((link) => (
<li key={link.href}>
<Link
className={classNames({
"text-zinc-900": link.href === currentPath,
"text-zinc-500": link.href !== currentPath,
"hover:text-zinc-800 transaition-colors": true,
})}
href={link.href}
>
{link.label}
</Link>
</li>
))}
</ul>
);
};
const Avator = () => {
const { status, data: session } = useSession();
if (status === "loading") return <Skeleton width="3rem" />;
if (status === "unauthenticated")
return (
<Link
className="text-zinc-500 hover:text-zinc-800 transaition-colors"
href="/api/auth/signin"
>
Sign In
</Link>
);
return (
<Box>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Avatar
src={session!.user!.image!}
fallback="?"
size="2"
radius="full"
className="cursor-pointer"
referrerPolicy="no-referrer"
/>
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Label>
<Text size="2">{session!.user!.email}</Text>
</DropdownMenu.Label>
<DropdownMenu.Item>
<Link href="/api/auth/signout">Sign Out</Link>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</Box>
);
};