DmitriyB
25 lines
1.0 KiB
TypeScript
25 lines
1.0 KiB
TypeScript
import React, { useState } from "react";
|
|
import whiteLogo from './logoWhiteIcon.svg';
|
|
|
|
type TProps = {
|
|
changeLang: (lang: 'ru' | 'en') => void
|
|
onClickLogo: () => void
|
|
}
|
|
|
|
export const MainPartHeader:React.FC<TProps> = React.memo((props) => {
|
|
const [activeButton, setActiveButton] = useState<string>('ru');
|
|
|
|
function onClickChangeLang(lang: 'ru' | 'en') {
|
|
setActiveButton(lang);
|
|
props.changeLang(lang);
|
|
}
|
|
|
|
return <div className="main-part-header">
|
|
<img className="main-part-header-logo" alt="logo" src={whiteLogo} onClick={() => props.onClickLogo()}/>
|
|
<div className="main-part-header-lang">
|
|
<span className={`main-part-header-lang-button ${activeButton === 'en' ? 'active' : null}`} onClick={() => onClickChangeLang('en')}>EN</span>
|
|
<span className="main-part-header-lang-slash">/</span>
|
|
<span className={`main-part-header-lang-button ${activeButton === 'ru' ? 'active' : null}`} onClick={() => onClickChangeLang('ru')}>RU</span>
|
|
</div>
|
|
</div>
|
|
}) |