CollectionCard.js

import React, { Component } from 'react'
import Popover from 'src/components/CollectionCard/Popover'
import { BASE_URL } from 'src/service'
import { Trophy } from 'styled-icons/fa-solid/Trophy'
import { Heart } from 'styled-icons/fa-solid/Heart'
import { ShareAlt } from 'styled-icons/fa-solid/ShareAlt'
import {
  Card,
  Inner,
  Title,
  Social,
  Likes,
  Share,
  Shares,
  Header,
  Place,
  AuthorWrap,
  AuthorPhoto,
} from './CollectionCard.styled'

class CollectionCard extends Component {
  state = {
    isPopoverVisible: false,
  }

  handleAuthorMouseEnter = () => {
    this.setState({
      isPopoverVisible: true,
    })
  }

  handleCardMouseLeave = () => {
    this.setState({
      isPopoverVisible: false,
    })
  }

  render() {
    const { data, className } = this.props
    return (
      <Card
        background={BASE_URL + data.image}
        className={className}
        onMouseLeave={this.handleCardMouseLeave}
      >
        <Header>
          <Place>
            <Trophy size="14" color="#ffb100" />
            <span>#{data.rank}</span>
          </Place>
          <AuthorWrap onMouseEnter={this.handleAuthorMouseEnter}>
            <AuthorPhoto image={BASE_URL + data.user.profile_picture} />
          </AuthorWrap>
        </Header>
        <Inner>
          <Title>{data.title}</Title>
          <Social>
            <Likes>
              <Heart size="12" color="#ff3209" />
              <span>{data.like_count}</span>
            </Likes>
            <Share>
              <ShareAlt size="12" color="#ccc" />
              <span>Share</span>
            </Share>
            <Shares>
              <ShareAlt size="12" color="#ccc" />
              <span>{data.share_count}</span>
            </Shares>
          </Social>
        </Inner>

        <Popover {...data} isPopoverVisible={this.state.isPopoverVisible} />
      </Card>
    )
  }
}

export default CollectionCard