import React, { useContext } from 'react'; import Switch from 'react-switch'; import { Link } from 'react-router-dom'; import { shade } from 'polished'; import { ThemeContext } from 'styled-components'; import * as S from './styles'; import { Logo } from '../Logo'; interface HeaderProps { isLink?: string; toggleTheme(): void; } const Header: React.FC<HeaderProps> = ({ isLink, toggleTheme }) => { const { colors, title } = useContext(ThemeContext); return ( <S.Container> <S.LogoContainer> <S.LogoImage> <Logo isDark={title === 'dark'} /> </S.LogoImage> <h1>vagasExplorer</h1> </S.LogoContainer> <Switch onChange={toggleTheme} checked={title === 'dark'} checkedIcon={false} uncheckedIcon={false} height={10} width={40} handleDiameter={20} offColor={shade(0.15, colors.primary)} onColor={colors.secundary} /> <S.ActionContainer> {isLink && ( <Link to={isLink}> <S.IconBack /> Voltar </Link> )} </S.ActionContainer> </S.Container> ); }; export default Header;