80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import * as React from "react";
|
||
import { Box, IconButton, Typography } from "@mui/material";
|
||
import theme from "../../../theme";
|
||
import ExitToAppOutlinedIcon from "@mui/icons-material/ExitToAppOutlined";
|
||
import Logo from "../../Logo";
|
||
import { clearAuthToken } from "@frontend/kitui";
|
||
import { logout } from "@root/api/auth";
|
||
|
||
const Header: React.FC = () => {
|
||
return (
|
||
<React.Fragment>
|
||
<Box
|
||
sx={{
|
||
backgroundColor: theme.palette.menu.main,
|
||
width: "100%",
|
||
minHeight: "85px",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
flexWrap: "wrap",
|
||
paddingLeft: "5px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: "150px",
|
||
display: "flex",
|
||
justifyContent: "right",
|
||
alignItems: "center",
|
||
}}
|
||
>
|
||
<Logo />
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="h6"
|
||
sx={{
|
||
maxWidth: "230px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
fontWeight: "normal",
|
||
}}
|
||
>
|
||
Добро пожаловать, Администратор сервиса
|
||
</Typography>
|
||
|
||
<IconButton
|
||
onClick={() => {
|
||
logout().then(clearAuthToken);
|
||
}}
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
cursor: "pointer",
|
||
padding: "0 31px",
|
||
}}
|
||
>
|
||
<ExitToAppOutlinedIcon
|
||
sx={{
|
||
color: theme.palette.golden.main,
|
||
transform: "scale(1.3)",
|
||
}}
|
||
/>
|
||
</IconButton>
|
||
</Box>
|
||
</Box>
|
||
</React.Fragment>
|
||
);
|
||
};
|
||
|
||
export default Header;
|