{"size": 1531, "ext": "js", "max_stars_repo_path": "src/components/ProductLink.js", "max_stars_repo_name": "flockcover/flock", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/ProductLink.js", "max_issues_repo_name": "flockcover/flock", "max_issues_repo_issues_event_min_datetime": "2018-10-02T23:30:51.000Z", "max_issues_repo_issues_event_max_datetime": "2019-02-05T17:23:16.000Z", "max_forks_repo_path": "src/components/ProductLink.js", "max_forks_repo_name": "flockcover/flock", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 21.8714285714, "max_line_length": 62, "alphanum_fraction": 0.5689092097}
import React, {Component} from 'react'
import {withPrefix} from 'gatsby'
import PropTypes from 'prop-types'
import * as R from 'ramda'
import {css} from '@emotion/core'

import Link from './Link'
import ArrowText from './ArrowText'
import SmallText from './SmallText'
import {colors, space, fontFamilies} from '../constants/theme'

class ProductLink extends Component {
  state = {
    isHovered: false
  }

  render() {
    const {to, image, text} = this.props
    return (
      <Link
        onMouseOver={() => {
          this.setState({isHovered: true})
        }}
        onMouseOut={() => {
          this.setState({isHovered: false})
        }}
        to={to}
        style={styles.link}
      >
        <img
          css={css({
            height: '2rem',
            marginBottom: R.nth(1, space)
          })}
          src={withPrefix(image)}
        />
        <ArrowText
          css={css({fontFamily: fontFamilies.chivo})}
          isHovered={this.state.isHovered}
        >
          <SmallText fontWeight={700} color={colors.white}>
            {text}
          </SmallText>
        </ArrowText>
      </Link>
    )
  }
}

export default ProductLink

const styles = {
  link: {
    textDecoration: 'none',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
    color: colors.white,
    height: '100%',
    paddingTop: R.nth(3, space),
    paddingBottom: R.nth(3, space)
  }
}

ProductLink.propTypes = {
  to: PropTypes.string,
  image: PropTypes.string,
  text: PropTypes.string
}
