{"size": 886, "ext": "js", "max_stars_repo_path": "packages/@matthieuauger/gatsby-theme-meetup/src/components/Button/Button.style.js", "max_stars_repo_name": "Narno/gatsby-theme-meetup", "max_stars_repo_stars_event_min_datetime": "2019-08-01T07:00:01.000Z", "max_stars_repo_stars_event_max_datetime": "2020-12-12T13:07:51.000Z", "max_issues_repo_path": "packages/@matthieuauger/gatsby-theme-meetup/src/components/Button/Button.style.js", "max_issues_repo_name": "Narno/gatsby-theme-meetup", "max_issues_repo_issues_event_min_datetime": "2019-07-29T11:58:08.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T15:25:14.000Z", "max_forks_repo_path": "packages/@matthieuauger/gatsby-theme-meetup/src/components/Button/Button.style.js", "max_forks_repo_name": "Narno/gatsby-theme-meetup", "max_forks_repo_forks_event_min_datetime": "2019-08-01T11:23:57.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-12T00:17:44.000Z"}
{"max_stars_count": 13, "max_issues_count": 14, "max_forks_count": 7, "avg_line_length": 21.6097560976, "max_line_length": 66, "alphanum_fraction": 0.5925507901}
import styled from 'styled-components'

const StyledButton = styled.div`
  ${({ type }) => {
    const primaryColor = '#ED1C40'
    const lightGrey = '#4A4A4A'
    const strongGrey = '#333333'
    const lightColor = '#FCFCFC'

    const colorScheme = {
      primary: {
        borderColor: primaryColor,
        hoverBackgroundColor: primaryColor,
      },
      neutral: {
        borderColor: strongGrey,
        hoverBackgroundColor: strongGrey,
      },
    }
    return `
    a {
      display: block;
      padding: 18px 45px;
      font-size: 1.3rem;
      font-weight: bold;
      color: ${lightGrey};
      text-decoration: none;
      border: 4px solid ${colorScheme[type].borderColor};
      box-shadow: none;
    }

    a:hover {
      background-color: ${colorScheme[type].hoverBackgroundColor};
      color: ${lightColor}; 
    }
  `
  }};
`

export default StyledButton
