frontPanel/src/pages/Landing/HeaderLanding.tsx

65 lines
2.4 KiB
TypeScript
Raw Normal View History

2023-10-04 22:21:17 +00:00
import React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import SectionStyled from './SectionStyled';
import PenaLogo from "../../ui_kit/PenaLogo";
import NavMenuItem from "@ui_kit/Header/NavMenuItem";
const buttonMenu = ['Меню 1', 'Меню 2', 'Меню 3', 'Меню 4', 'Меню 5', 'Меню 1', 'Меню 2']
export default function Component() {
const [select, setSelect] = React.useState(0)
return (
<SectionStyled tag={'header'} bg={'#F2F3F7'} mwidth={'1160px'}
sxsect={{
minHeight: '80px',
borderBottom: '1px solid #E3E3E3',
position: "relative",
zIndex: 3
}}
sxcont={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 10px'
}}>
<PenaLogo width={150} />
<Box
sx={{
maxWidth: '595px',
width: '100%',
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
marginRight: "138px",
}}
>
{buttonMenu.map( (element, index) => (
<NavMenuItem
text={element}
// component={Link}
// to={url}
key={index}
onClick={() => {
setSelect(index);
}}
isActive={select === index}
/>
))}
</Box>
<Button variant="outlined"
sx={{
color: 'black',
border: '1px solid black',
textTransform: 'none',
fontWeight: '400',
fontSize: '18px',
lineHeight: '24px',
borderRadius: '8px',
padding: '8px 17px',
}}
>Предрегистрация</Button>
2023-10-04 22:21:17 +00:00
</SectionStyled>
)
}