frontPanel/src/ui_kit/Header/Header.tsx

104 lines
2.8 KiB
TypeScript
Executable File

import BackArrowIcon from "@icons/BackArrowIcon";
import EyeIcon from "@icons/EyeIcon";
import { Box, Button, Container, FormControl, IconButton, TextField, useMediaQuery, useTheme } from "@mui/material";
import { decrementCurrentStep } from "@root/quizes/actions";
import PenaLogo from "../PenaLogo";
import CustomAvatar from "./Avatar";
import NavMenuItem from "./NavMenuItem";
import { Link } from "react-router-dom";
export default function Header() {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
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,
}}
>
<Link to="/">
<PenaLogo width={124} />
</Link>
<Box
sx={{
display: "flex",
alignItems: "center",
ml: "37px",
}}
>
<IconButton sx={{ p: "6px" }} onClick={decrementCurrentStep}>
<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>
{isTablet ? null : (
<>
<Box
sx={{
display: "flex",
gap: "31px",
overflow: "hidden",
ml: "20px",
}}
>
{/* <NavMenuItem text="Редактировать" isActive /> */}
{/* <NavMenuItem text="Заявки" />
<NavMenuItem text="Аналитика" />
<NavMenuItem text="История" />
<NavMenuItem text="Помощь" /> */}
</Box>
<Box
sx={{
display: "flex",
ml: "auto",
gap: "15px",
}}
>
{/* <CustomAvatar
sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }}
/> */}
</Box>
</>
)}
</Container>
);
}