frontend/src/components/Topbar.tsx

114 lines
2.9 KiB
TypeScript
Raw Normal View History

2020-08-17 23:56:34 +02:00
import React, { useState, MouseEvent } from 'react';
import Transfer from '../assets/transfer.png';
import Search from '../assets/search.svg';
import UK from '../assets/UK.png';
import PL from '../assets/PL.png';
import User from '../assets/user.png';
import CloseIcon from '../assets/close.svg';
import { Profile } from './Profile';
2020-08-17 23:56:34 +02:00
import { Dropdown } from './Dropdown';
import styled from 'styled-components';
const TopbarTextStyled = styled.div`
@media only screen and (max-width: 670px) {
display: none;
}
`;
const TopbarStyled = styled.div`
background-color: #ffdc61;
height: 80px;
padding: 5px;
font-family: comic sans MS;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: space-between;
`;
2020-08-17 23:56:34 +02:00
const TopbarLogoWrapperStyled = styled.div`
display: flex;
align-items: center;
flex-grow: 0.5;
justify-content: flex-start;
`;
2020-08-17 23:56:34 +02:00
const TopbarLogoStyled = styled.img`
width: 80px;
height: 80px;
@media only screen and (max-width: 670px) {
width: 60px;
height: 60px;
}
`;
2020-08-17 23:56:34 +02:00
const TopbarInputStyled = styled.div`
width: 70%;
display: flex;
flex-grow: 3;
`;
const TopbarInputFieldStyled = styled.div`
width: 96%;
margin-top: 10px;
`;
const TopbarInputIconStyled = styled.img`
width: 35px;
@media only screen and (max-width: 670px) {
width: 25px;
}
`;
const TopbarIcon = styled.img`
width: 50px;
cursor: pointer;
@media only screen and (max-width: 670px) {
width: 35px;
}
`;
const TopbarIconBox = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
flex-grow: 1.5;
`;
interface TopbarProps {
2020-08-17 23:56:34 +02:00
handleTransfer: (e: MouseEvent) => void;
}
2020-08-17 23:56:34 +02:00
export const Topbar = ({ handleTransfer }: TopbarProps) => {
const [isPolish, setIsPolish] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null);
2020-08-17 23:56:34 +02:00
const onLangChange = () => setIsPolish(!isPolish);
2020-08-17 23:56:34 +02:00
const handleProfile = (event: MouseEvent<HTMLImageElement>) => setAnchorEl(event.currentTarget);
const handleClose = () => setAnchorEl(null);
return (
<TopbarStyled>
2020-08-17 23:56:34 +02:00
<TopbarLogoWrapperStyled>
<TopbarLogoStyled alt="logo" src="https://plannaplan.pl/img/logo.svg" />
<TopbarTextStyled> plan na plan </TopbarTextStyled>
2020-08-17 23:56:34 +02:00
</TopbarLogoWrapperStyled>
<TopbarInputStyled>
<TopbarInputIconStyled alt="search" src={Search} />
<TopbarInputFieldStyled>
2020-08-17 23:56:34 +02:00
<Dropdown />
</TopbarInputFieldStyled>
<TopbarInputIconStyled alt="close" src={CloseIcon} />
2020-08-17 23:56:34 +02:00
</TopbarInputStyled>
<TopbarIconBox>
<TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} />
<TopbarIcon alt="change_language" src={isPolish ? UK : PL} onClick={onLangChange} />
<TopbarIcon alt="profile" src={User} onClick={handleProfile} />
2020-08-17 23:56:34 +02:00
<Profile anchorEl={anchorEl} handleClose={handleClose} />
</TopbarIconBox>
</TopbarStyled>
);
};