gab-social/app/javascript/gabsocial/components/user_stat.js

77 lines
1.7 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
2020-02-19 23:57:07 +00:00
import { NavLink } from 'react-router-dom'
2020-05-09 03:17:19 +01:00
import { CX } from '../constants'
2020-02-19 23:57:07 +00:00
import Text from './text'
2020-04-23 07:13:29 +01:00
/**
* Renders a user stat component
* @param {string} props.title - bottom title
* @param {string} props.to - location to go to on click
* @param {string} props.value - top value
*/
class UserStat extends React.PureComponent {
2020-02-19 23:57:07 +00:00
state = {
hovering: false,
}
handleOnMouseEnter = () => {
this.setState({ hovering: true })
}
handleOnMouseLeave = () => {
this.setState({ hovering: false })
}
render() {
2020-05-09 03:17:19 +01:00
const {
to,
title,
value,
isCentered,
} = this.props
2020-02-19 23:57:07 +00:00
const { hovering } = this.state
2020-05-09 03:17:19 +01:00
const align = isCentered ? 'center' : 'left'
const containerClasses = CX({
d: 1,
2020-05-09 03:17:19 +01:00
cursorPointer: 1,
noUnderline: 1,
flexNormal: isCentered,
flexGrow1: !isCentered,
pr15: !isCentered,
})
2020-02-19 23:57:07 +00:00
return (
<NavLink
to={to}
title={`${value} ${title}`}
2020-05-09 03:17:19 +01:00
className={containerClasses}
2020-04-23 07:13:29 +01:00
onMouseEnter={this.handleOnMouseEnter}
onMouseLeave={this.handleOnMouseLeave}
2020-02-19 23:57:07 +00:00
>
<Text size='extraLarge' weight='bold' color='brand' align={align}>
2020-02-19 23:57:07 +00:00
{value}
</Text>
2020-05-09 03:17:19 +01:00
<Text size='small' weight='medium' color='secondary' hasUnderline={hovering} align={align}>
2020-02-19 23:57:07 +00:00
{title}
</Text>
</NavLink>
)
}
2020-04-23 07:13:29 +01:00
}
UserStat.propTypes = {
title: PropTypes.string.isRequired,
to: PropTypes.string.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.object,
]).isRequired,
isCentered: PropTypes.bool.isRequired,
}
export default UserStat