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 = ( { 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 ;