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'; import ProfileIcon from '../assets/account.svg'; import { Profile } from './Profile'; import { Dropdown } from './Dropdown'; import PolishIcon from '../assets/poland.svg'; import EnglishIcon from '../assets/united-kingdom.svg'; import styled from 'styled-components/macro'; import ClickAwayListener from 'react-click-away-listener'; const Topbar = styled.div` background-color: #eceef4; height: 80px; padding: 5px; font-size: 24px; font-weight: bold; display: flex; justify-content: space-between; `; const LogoWrapper = styled.div` display: flex; justify-content: center; align-items: center; flex: 2; `; const Logo = styled.img` width: 70px; height: 70px; @media only screen and (max-width: 670px) { width: 60px; height: 60px; } `; const Text = styled.div` @media only screen and (max-width: 670px) { display: none; } `; const FlexboxColumn = styled.div` display: flex; flex-direction: column; flex: 9; `; const InputWrapper = styled.div` display: flex; margin-top: 15px; background-color: #f2f4f7; border-radius: 6px; `; const Input = styled.input` background-color: #f1f2f5; font-size: 20px; height: 40px; width: 100%; margin-left: 5px; border: none; &:focus { outline: none; } `; const InputIcon = styled.img` width: 30px; @media only screen and (max-width: 670px) { width: 25px; } cursor: pointer; `; const IconWrapper = styled.div` display: flex; justify-content: center; align-items: center; flex: 2; `; const Icon = styled.img` width: 40px; cursor: pointer; @media only screen and (max-width: 670px) { width: 35px; } `; const VerticalLine = styled.div` border-left: 1px solid black; height: 30px; `; interface TopbarProps { handleTransfer: (e: MouseEvent) => void; } export default function ({ handleTransfer }: TopbarProps) { const [clearInput, setClearInput] = useState(false); const [isPolish, setIsPolish] = useState(false); const [anchorEl, setAnchorEl] = useState(null); const [open, setOpen] = useState(false); const [input, setInput] = useState(''); const onLangChange = () => setIsPolish(!isPolish); const handleProfile = (event: MouseEvent) => setAnchorEl(event.currentTarget); const handleClose = () => setAnchorEl(null); const handleClearInput = () => setClearInput(!clearInput); const handleChange = (event: ChangeEvent) => setInput(event.target.value); const handleClick = () => setOpen(true); const handleCloseDropdown = () => setOpen(false); const handleClickAway = () => setOpen(false); useEffect(() => { clearInput && (setInput(''), handleClearInput()); }, [clearInput]); return ( plan na plan nasz student ); }