51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { Avatar, Button, Dropdown, theme } from "antd";
|
|
import { useAuth } from "@web/src/providers/auth-provider";
|
|
import { Icon } from "@nice/iconer";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export default function UserHeader() {
|
|
const { logout, user, isAuthenticated } = useAuth();
|
|
const { token } = theme.useToken();
|
|
|
|
const navigate = useNavigate();
|
|
return (
|
|
<div className="p-2 flex items-center justify-end bg-gradient-to-r from-primary to-primaryActive">
|
|
<div className=" flex items-center gap-4">
|
|
<div
|
|
style={{ color: token.colorTextLightSolid }}
|
|
className="rounded flex items-center select-none justify-between">
|
|
<div
|
|
className="flex hover:bg-primaryHover rounded px-2 items-center gap-4 hover:cursor-pointer"
|
|
onClick={() => {
|
|
// if (user?.pilot?.id) {
|
|
// navigate(`/pilots/${user?.pilot.id}`);
|
|
// }
|
|
}}>
|
|
|
|
<Avatar
|
|
shape={"circle"}
|
|
// src={user?.pilot?.photo}
|
|
style={{ background: token.colorPrimary }}>
|
|
{(user?.showname || user?.username)
|
|
?.slice(0, 1)
|
|
.toUpperCase()}
|
|
</Avatar>
|
|
<span>{user?.showname || user?.username}</span>
|
|
{user?.department && <>
|
|
<Icon name="org"></Icon>
|
|
<span className=" font-bold">{user?.department?.name}</span></>}
|
|
</div>
|
|
</div>
|
|
<div
|
|
onClick={async () => {
|
|
await logout()
|
|
}}
|
|
className="active:bg-gray-100/60 flex items-center gap-2 text-white hover:bg-gray-100/30 px-2 rounded py-1 cursor-pointer">
|
|
<Icon name="logout" />
|
|
注销
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|