82 lines
3.3 KiB
TypeScript
82 lines
3.3 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
import { useAuth, useLogout } from "../../lib/authClient";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "../ui/dropdown-menu";
|
|
import { ModeToggle } from "../mode-toggle";
|
|
import { Button } from "../ui/button";
|
|
|
|
export default function Nav() {
|
|
const { session } = useAuth();
|
|
const logout = useLogout();
|
|
return (
|
|
<nav className="flex justify-end w-full shadow ">
|
|
<div className="m-2 flex flex-row gap-1">
|
|
<div className="m-1">
|
|
<ModeToggle />
|
|
</div>
|
|
<div className="m-1">
|
|
<Button>
|
|
<a
|
|
href={`${window.location.origin}/lst/d`}
|
|
target="_blank"
|
|
>
|
|
LST - Docs
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
|
|
{session ? (
|
|
<div className="m-1">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger>
|
|
<Avatar>
|
|
<AvatarImage
|
|
src="https://github.com/evilrabbit.png"
|
|
alt="@evilrabbit"
|
|
/>
|
|
<AvatarFallback>CN</AvatarFallback>
|
|
</Avatar>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuLabel>
|
|
Hello {session.user?.username}
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
{/* <Link to="/passwordChange">
|
|
Password Change
|
|
</Link> */}
|
|
</DropdownMenuItem>
|
|
{/* <DropdownMenuItem>Billing</DropdownMenuItem>
|
|
<DropdownMenuItem>Team</DropdownMenuItem>
|
|
<DropdownMenuItem>Subscription</DropdownMenuItem> */}
|
|
<hr className="solid"></hr>
|
|
<DropdownMenuItem>
|
|
<div className="m-auto">
|
|
<button onClick={() => logout()}>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
) : (
|
|
<div className="m-1">
|
|
<Button>
|
|
<Link to="/login">Login</Link>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|