2018-05-30 16:41:47 +00:00
import React from 'react' ;
import { Sparklines , SparklinesCurve } from 'react-sparklines' ;
2018-06-04 03:15:50 +00:00
import { FormattedMessage } from 'react-intl' ;
2018-05-30 16:41:47 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2019-01-14 22:29:21 +00:00
import Permalink from './permalink' ;
2018-06-04 03:15:50 +00:00
import { shortNumberFormat } from '../utils/numbers' ;
2018-05-30 16:41:47 +00:00
const Hashtag = ( { hashtag } ) => (
< div className = 'trends__item' >
< div className = 'trends__item__name' >
2019-01-14 22:29:21 +00:00
< Permalink href = { hashtag . get ( 'url' ) } to = { ` /timelines/tag/ ${ hashtag . get ( 'name' ) } ` } >
2018-05-30 16:41:47 +00:00
# < span > { hashtag . get ( 'name' ) } < / s p a n >
2019-01-14 22:29:21 +00:00
< / P e r m a l i n k >
2018-05-30 16:41:47 +00:00
< FormattedMessage id = 'trends.count_by_accounts' defaultMessage = '{count} {rawCount, plural, one {person} other {people}} talking' values = { { rawCount : hashtag . getIn ( [ 'history' , 0 , 'accounts' ] ) , count : < strong > { shortNumberFormat ( hashtag . getIn ( [ 'history' , 0 , 'accounts' ] ) ) } < /strong> }} / >
< / d i v >
< div className = 'trends__item__current' >
{ shortNumberFormat ( hashtag . getIn ( [ 'history' , 0 , 'uses' ] ) ) }
< / d i v >
< div className = 'trends__item__sparkline' >
< Sparklines width = { 50 } height = { 28 } data = { hashtag . get ( 'history' ) . reverse ( ) . map ( day => day . get ( 'uses' ) ) . toArray ( ) } >
< SparklinesCurve style = { { fill : 'none' } } / >
< / S p a r k l i n e s >
< / d i v >
< / d i v >
) ;
Hashtag . propTypes = {
hashtag : ImmutablePropTypes . map . isRequired ,
} ;
export default Hashtag ;