129 lines
4.6 KiB
TypeScript
Executable File
129 lines
4.6 KiB
TypeScript
Executable File
import { Box, Container, FormControl, IconButton, TextField, useTheme } from "@mui/material";
|
||
import CustomButton from "../components/CustomButton";
|
||
import BackArrowIcon from "../assets/icons/BackArrowIcon";
|
||
import EyeIcon from "../assets/icons/EyeIcon";
|
||
import CustomAvatar from "../components/Navbar/Avatar";
|
||
import NavMenuItem from "../components/NavMenuItem";
|
||
import PenaLogo from "../components/PenaLogo";
|
||
|
||
interface Props {
|
||
isLoggedIn: boolean;
|
||
}
|
||
|
||
export default function Header({ isLoggedIn }: Props) {
|
||
const theme = useTheme();
|
||
|
||
return (
|
||
<Container
|
||
component="nav"
|
||
maxWidth={false}
|
||
disableGutters
|
||
sx={{
|
||
px: "16px",
|
||
display: "flex",
|
||
height: "80px",
|
||
alignItems: "center",
|
||
bgcolor: "white",
|
||
borderBottom: "1px solid #E3E3E3",
|
||
zIndex: theme.zIndex.drawer + 1,
|
||
}}
|
||
>
|
||
<PenaLogo width={124} />
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
ml: "37px",
|
||
}}
|
||
>
|
||
<IconButton sx={{ p: "6px" }}>
|
||
<BackArrowIcon />
|
||
</IconButton>
|
||
<FormControl
|
||
fullWidth
|
||
variant="standard"
|
||
>
|
||
<TextField
|
||
fullWidth
|
||
id="project-name"
|
||
placeholder="Название проекта окно"
|
||
sx={{
|
||
width: "270px",
|
||
"& .MuiInputBase-root": {
|
||
height: "34px",
|
||
borderRadius: "8px",
|
||
p: 0,
|
||
},
|
||
}}
|
||
inputProps={{
|
||
sx: {
|
||
height: "20px",
|
||
borderRadius: "8px",
|
||
fontSize: "16px",
|
||
lineHeight: "20px",
|
||
p: "7px",
|
||
color: "black",
|
||
"&::placeholder": {
|
||
opacity: 1,
|
||
},
|
||
}
|
||
}}
|
||
/>
|
||
</FormControl>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
gap: "30px",
|
||
overflow: "hidden",
|
||
ml: "20px",
|
||
}}
|
||
>
|
||
<NavMenuItem text="Редактировать" isActive />
|
||
<NavMenuItem text="Заявки" />
|
||
<NavMenuItem text="Аналитика" />
|
||
<NavMenuItem text="История" />
|
||
<NavMenuItem text="Помощь" />
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
ml: "auto",
|
||
gap: "15px",
|
||
}}
|
||
>
|
||
<CustomButton
|
||
variant="outlined"
|
||
startIcon={<EyeIcon />}
|
||
sx={{
|
||
color: theme.palette.brightPurple.main,
|
||
borderColor: theme.palette.brightPurple.main,
|
||
fontSize: "14px",
|
||
lineHeight: "18px",
|
||
px: "14px",
|
||
py: "8px",
|
||
width: "auto",
|
||
height: "34px",
|
||
"& .MuiButton-startIcon": {
|
||
mr: "3px",
|
||
}
|
||
}}
|
||
>Предпросмотр</CustomButton>
|
||
<CustomButton
|
||
variant="contained"
|
||
sx={{
|
||
backgroundColor: theme.palette.brightPurple.main,
|
||
borderColor: theme.palette.brightPurple.main,
|
||
fontSize: "14px",
|
||
lineHeight: "18px",
|
||
px: "17px",
|
||
py: "8px",
|
||
width: "auto",
|
||
height: "34px",
|
||
}}
|
||
>Опубликовать</CustomButton>
|
||
<CustomAvatar sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
|
||
</Box>
|
||
</Container>
|
||
);
|
||
} |