{"size": 694, "ext": "js", "max_stars_repo_path": "src/components/CurrencyTicker/components/TickerItem/index.js", "max_stars_repo_name": "fullstack99/coin-dashboard", "max_stars_repo_stars_event_min_datetime": "2020-12-21T02:07:41.000Z", "max_stars_repo_stars_event_max_datetime": "2020-12-21T02:07:41.000Z", "max_issues_repo_path": "src/components/CurrencyTicker/components/TickerItem/index.js", "max_issues_repo_name": "fullstack99/coin-dashboard", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/CurrencyTicker/components/TickerItem/index.js", "max_forks_repo_name": "fullstack99/coin-dashboard", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 21.0303030303, "max_line_length": 73, "alphanum_fraction": 0.6945244957}
import React from "react"
import { string, oneOfType, number } from "prop-types"
import styled from "@emotion/styled"

const TickerItem = styled(({ label, value, placeholder, className }) => (
  <span className={className}>
    {label}
    {value ? value : placeholder}
  </span>
))`
  color: #ffffff;
  font-family: sans-serif;
  font-size: 14px;
  letter-spacing: -0.5px;
  margin-right: 55px;
  opacity: 0.7;
  white-space: nowrap;
`

TickerItem.propTypes = {
  label: string.isRequired,
  value: oneOfType([string.isRequired, number.isRequired]),
  placeholder: string.isRequired
}

TickerItem.defaultProps = {
  label: null,
  value: null,
  placeholder: null
}

export default TickerItem
