/** @jsxRuntime classic */ /** @jsx jsx */ import {jsx} from 'theme-ui' import { GrLinkedinOption, GrMedium, GrFacebookOption, GrTwitter, GrGithub, } from 'react-icons/gr' import {FiCodepen} from 'react-icons/fi' import {IoIosGlobe, IoLogoWhatsapp} from 'react-icons/io' import PropTypes from 'prop-types' import {trackGAEvent} from '../utils/googleAnalytics' const Icon = ({name, url, style}) => { const renderIcon = () => { switch (name) { case 'Facebook': return ( <GrFacebookOption sx={{ ...style, '&:hover': { color: '#3b5998', }, }} /> ) case 'Twitter': return ( <GrTwitter sx={{ ...style, '&:hover': { color: '#1da1f2', }, }} /> ) case 'LinkedIn': return ( <GrLinkedinOption sx={{ ...style, '&:hover': { color: '#0077b5', }, }} /> ) case 'Medium': return ( <GrMedium sx={{ ...style, '&:hover': { color: '#00ab6c', }, }} /> ) case 'GitHub': return ( <GrGithub sx={{ ...style, '&:hover': { color: '#333', }, }} /> ) case 'CodePen': return ( <FiCodepen sx={{ ...style, '&:hover': { color: '#ae63e4', }, }} /> ) case 'Portfolio': return ( <IoIosGlobe sx={{ ...style, '&:hover': { color: '#fc7740', }, }} /> ) case 'WhatsApp': return ( <IoLogoWhatsapp sx={{ ...style, '&:hover': { color: '#128c7e', }, }} /> ) default: return null } } return ( <a href={url} target='_blank' rel='noreferrer noopener' aria-label={name} title={name} onClick={() => trackGAEvent('social icons', `clicked on ${name} link`, 'icon click') }> {renderIcon()} </a> ) } Icon.propTypes = { name: PropTypes.string, url: PropTypes.string, style: PropTypes.object, } export default Icon