65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
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>
|
||
</SectionStyled>
|
||
)
|
||
} |