68 lines
2.8 KiB
TypeScript
68 lines
2.8 KiB
TypeScript
import { ArchiveIcon, LogOutIcon, User2Icon, SquareUserIcon, SettingsIcon, BellIcon } from "lucide-react";
|
|
import { authServiceClient } from "@/grpcweb";
|
|
import useCurrentUser from "@/hooks/useCurrentUser";
|
|
import useNavigateTo from "@/hooks/useNavigateTo";
|
|
import { cn } from "@/lib/utils";
|
|
import { Routes } from "@/router";
|
|
import { useTranslate } from "@/utils/i18n";
|
|
import UserAvatar from "./UserAvatar";
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu";
|
|
|
|
interface Props {
|
|
collapsed?: boolean;
|
|
}
|
|
|
|
const UserBanner = (props: Props) => {
|
|
const { collapsed } = props;
|
|
const t = useTranslate();
|
|
const navigateTo = useNavigateTo();
|
|
const currentUser = useCurrentUser();
|
|
|
|
const handleSignOut = async () => {
|
|
await authServiceClient.deleteSession({});
|
|
window.location.href = Routes.AUTH;
|
|
};
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild disabled={!currentUser}>
|
|
<div className={cn("w-auto flex flex-row justify-start items-center cursor-pointer text-foreground", collapsed ? "px-1" : "px-3")}>
|
|
{currentUser.avatarUrl ? (
|
|
<UserAvatar className="shrink-0" avatarUrl={currentUser.avatarUrl} />
|
|
) : (
|
|
<User2Icon className="w-6 mx-auto h-auto text-muted-foreground" />
|
|
)}
|
|
{!collapsed && (
|
|
<span className="ml-2 text-lg font-medium text-foreground grow truncate">
|
|
{currentUser.displayName || currentUser.username}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start">
|
|
<DropdownMenuItem onClick={() => navigateTo(`/u/${encodeURIComponent(currentUser.username)}`)}>
|
|
<SquareUserIcon className="w-4 h-auto text-muted-foreground" />
|
|
<span className="truncate">{t("common.profile")}</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => navigateTo(Routes.ARCHIVED)}>
|
|
<ArchiveIcon className="w-4 h-auto text-muted-foreground" />
|
|
<span className="truncate">{t("common.archived")}</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => navigateTo(Routes.INBOX)}>
|
|
<BellIcon className="w-4 h-auto text-muted-foreground" />
|
|
<span className="truncate">{t("common.inbox")}</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => navigateTo(Routes.SETTING)}>
|
|
<SettingsIcon className="w-4 h-auto text-muted-foreground" />
|
|
<span className="truncate">{t("common.settings")}</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={handleSignOut}>
|
|
<LogOutIcon className="w-4 h-auto text-muted-foreground" />
|
|
<span className="truncate">{t("common.sign-out")}</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
};
|
|
|
|
export default UserBanner;
|