frontend/src/components/Topbar.tsx

160 lines
4.0 KiB
TypeScript
Raw Normal View History

2020-11-02 00:15:30 +01:00
import React, { useState, MouseEvent, ChangeEvent, useEffect } from 'react';
import Transfer from '../assets/transfer.png';
import Search from '../assets/search.svg';
import CloseIcon from '../assets/close.svg';
2020-10-30 00:42:40 +01:00
import ProfileIcon from '../assets/account.svg';
import { Profile } from './Profile';
2020-08-17 23:56:34 +02:00
import { Dropdown } from './Dropdown';
2020-10-30 00:42:40 +01:00
import PolishIcon from '../assets/poland.svg';
import EnglishIcon from '../assets/united-kingdom.svg';
import styled from 'styled-components/macro';
2020-11-02 00:15:30 +01:00
import ClickAwayListener from 'react-click-away-listener';
2020-08-20 18:14:28 +02:00
const Topbar = styled.div`
2020-11-02 00:15:30 +01:00
background-color: #eceef4;
height: 80px;
padding: 5px;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: space-between;
`;
2020-10-30 00:42:40 +01:00
const LogoWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
flex: 2;
`;
2020-10-30 00:42:40 +01:00
const Logo = styled.img`
width: 70px;
height: 70px;
@media only screen and (max-width: 670px) {
width: 60px;
height: 60px;
}
`;
2020-10-30 00:42:40 +01:00
const Text = styled.div`
2020-11-08 14:54:54 +01:00
user-select: none;
2020-10-30 00:42:40 +01:00
@media only screen and (max-width: 670px) {
display: none;
}
`;
2020-11-02 00:15:30 +01:00
const FlexboxColumn = styled.div`
display: flex;
flex-direction: column;
flex: 9;
2020-11-02 00:15:30 +01:00
`;
2020-10-30 00:42:40 +01:00
const InputWrapper = styled.div`
display: flex;
2020-11-02 00:15:30 +01:00
margin-top: 15px;
background-color: #f2f4f7;
border-radius: 6px;
`;
2020-11-02 00:15:30 +01:00
const Input = styled.input`
background-color: #f1f2f5;
font-size: 20px;
height: 40px;
width: 100%;
margin-left: 5px;
border: none;
&:focus {
outline: none;
}
`;
2020-10-30 00:42:40 +01:00
const InputIcon = styled.img`
width: 30px;
@media only screen and (max-width: 670px) {
width: 25px;
}
2020-08-20 18:14:28 +02:00
cursor: pointer;
`;
2020-10-30 00:42:40 +01:00
const IconWrapper = styled.div`
display: flex;
justify-content: center;
2020-10-30 00:42:40 +01:00
align-items: center;
flex: 2;
2020-10-30 00:42:40 +01:00
`;
const Icon = styled.img`
width: 40px;
cursor: pointer;
@media only screen and (max-width: 670px) {
width: 35px;
}
`;
2020-10-30 00:42:40 +01:00
const VerticalLine = styled.div`
border-left: 1px solid black;
height: 30px;
2020-11-02 00:15:30 +01:00
`;
2020-10-30 00:42:40 +01:00
interface TopbarProps {
2020-08-17 23:56:34 +02:00
handleTransfer: (e: MouseEvent) => void;
}
2020-08-20 18:14:28 +02:00
export default function ({ handleTransfer }: TopbarProps) {
const [clearInput, setClearInput] = useState(false);
const [isPolish, setIsPolish] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null);
2020-11-02 00:15:30 +01:00
const [open, setOpen] = useState(false);
const [input, setInput] = useState('');
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);
2020-08-20 18:14:28 +02:00
const handleClearInput = () => setClearInput(!clearInput);
2020-11-02 00:15:30 +01:00
const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
const handleClick = () => setOpen(true);
const handleCloseDropdown = () => setOpen(false);
const handleClickAway = () => setOpen(false);
useEffect(() => {
clearInput && (setInput(''), handleClearInput());
}, [clearInput]);
return (
2020-08-20 18:14:28 +02:00
<Topbar>
2020-10-30 00:42:40 +01:00
<LogoWrapper>
<Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
<Text> plan na plan </Text>
</LogoWrapper>
2020-11-02 00:15:30 +01:00
<FlexboxColumn>
<ClickAwayListener onClickAway={handleClickAway}>
<InputWrapper>
<Input placeholder="Wyszukaj przedmiot..." onChange={handleChange} onClick={handleClick} value={input} />
<InputIcon alt="close" src={CloseIcon} onClick={handleClearInput} />
<VerticalLine />
<InputIcon alt="search" src={Search} />
</InputWrapper>
<Dropdown open={open} input={input} handleCloseDropdown={handleCloseDropdown} />
</ClickAwayListener>
</FlexboxColumn>
2020-10-30 00:42:40 +01:00
<IconWrapper>
<Icon alt="transfer" src={Transfer} onClick={handleTransfer} />
2020-10-30 00:42:40 +01:00
<Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} />
<Icon alt="profile" src={ProfileIcon} onClick={handleProfile} />
2020-08-17 23:56:34 +02:00
<Profile anchorEl={anchorEl} handleClose={handleClose} />
2020-11-08 14:54:54 +01:00
<Text>nasz student</Text>
2020-10-30 00:42:40 +01:00
</IconWrapper>
2020-08-20 18:14:28 +02:00
</Topbar>
);
}