<commit_before>import styled from "styled-components"
import React from "react"
import { unica } from "Assets/Fonts"
import Colors from "Assets/Colors"

export const FollowButton: React.SFC = () => {
  return <FollowButtonContainer>Follow</FollowButtonContainer>
}

const FollowButtonContainer = styled.div`
  border: 1px solid ${Colors.grayRegular};
  ${unica("s12", "medium")};
  width: 80px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    border-color: black;
    background: black;
    color: white;
  }
`<commit_msg>follow button has follwing/unfollow states<commit_after>import styled, { StyledFunction } from "styled-components"
import React from "react"
import { unica } from "Assets/Fonts"
import Colors from "Assets/Colors"

interface Props {
  item?: {
    __id: string
    id: string
    is_followed: boolean | null
  }
  currentUser?: object
}

interface State {
  showUnfollow: boolean
}

export class FollowButton extends React.Component<Props, State> {
  state = {
    showUnfollow: false,
  }

  render() {
    const { showUnfollow } = this.state
    const isFollowed = this.props.item ? this.props.item.is_followed : true
    const text = isFollowed
      ? showUnfollow
        ? "Unfollow"
        : "Following"
      : "Follow"

    return (
      <FollowButtonContainer
        isFollowed={isFollowed}
        onMouseEnter={() => this.setState({ showUnfollow: true })}
        onMouseLeave={() => this.setState({ showUnfollow: false })}
      >
        {text}
      </FollowButtonContainer>
    )
  }
}

interface DivProps {
  isFollowed: boolean
}

const Div: StyledFunction<DivProps & React.HTMLProps<HTMLDivElement>> =
  styled.div

const FollowButtonContainer = Div`
  border: 1px solid ${Colors.grayRegular};
  ${unica("s12", "medium")};
  width: 80px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: ${props => (props.isFollowed ? Colors.grayMedium : "black")}
  &:hover {
    ${props =>
      !props.isFollowed &&
      `
      border-color: black;`}
    background: ${props => (props.isFollowed ? "white" : "black")}
    color: ${props => (props.isFollowed ? Colors.redMedium : "white")}
  }
`
{'fraction_non_alphanumeric': 0.13068949977467328, 'fraction_numerical': 0.006309148264984227, 'mean_word_length': 3.4488977955911824, 'pattern_counts': {'":': 0, '<': 10, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2274713', 'n_tokens_mistral': 734, 'n_tokens_neox': 723, 'n_words': 171}