{"size": 1358, "ext": "js", "max_stars_repo_path": "src/components/layout/MenuFooter.js", "max_stars_repo_name": "fwaltrick/portfolio", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/layout/MenuFooter.js", "max_issues_repo_name": "fwaltrick/portfolio", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/layout/MenuFooter.js", "max_forks_repo_name": "fwaltrick/portfolio", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 21.21875, "max_line_length": 78, "alphanum_fraction": 0.558910162}
import React from "react"
import Linkedin from "../../images/footer_linkedin.svg"
import Github from "../../images/footer_github.svg"
import Mail from "../../images/footer_mail.svg"
import styled from "styled-components"

const StyledFooter = styled.div`
  display: flex;
  justify-content: flex-end;
  align-items: center;

  &:focus {
    outline: none;
  }
`

const Icon = styled.svg`
  width: ${props => (props.size === "mob" ? "3.2em" : "1.48em")};
  margin-left: 0.8em;
  path {
    transition: fill 0.4s ease;
  }

  &:hover,
  &:focus {
    path {
      fill: var(--clr-pink);
      opacity: 1;
    }
  }

  @media screen and (max-width: 800px) {
    margin-left: 2em;
  }
`

export default function MenuFooter({ size }) {
  return (
    <StyledFooter>
      <a target="_blank" rel="noreferrer" href="https://github.com/fwaltrick">
        <Icon size={size} as={Github} />
      </a>
      <a
        target="_blank"
        rel="noreferrer"
        href="https://www.linkedin.com/in/fabricio-waltrick-988352164/"
      >
        <Icon size={size} as={Linkedin} />
      </a>

      <a
        target="_blank"
        rel="noreferrer"
        href="mailto:fabricio.waltrick@gmail.com"
      >
        <Icon
          as={Mail}
          style={size === "mob" ? { width: "3.5em" } : { width: "1.7em" }}
        />
      </a>
    </StyledFooter>
  )
}
