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

79 lines
1.5 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { CX } from '../constants'
import Button from './button'
import Icon from './icon'
import Text from './text'
class NavigationBarButton extends React.PureComponent {
render() {
const {
title,
icon,
to,
href,
attrTitle,
onClick,
} = this.props
const active = false
const classes = CX({
d: 1,
h53PX: 1,
flexRow: 1,
aiCenter: 1,
jcCenter: 1,
outlineNone: 1,
cursorPointer: 1,
bgTransparent: 1,
noUnderline: 1,
colorNavigation: 1,
px10: !!title,
px5: !title,
cWhite: !!title,
fs13PX: !!title,
fw400: !!title,
})
const iconClasses = CX({
fillNavigation: !!title || active,
fillNavigationBlend: !title,
mr10: !!title,
})
const iconSize = !!title ? '16px' : '18px'
return (
<Button
to={to}
href={href}
title={attrTitle}
onClick={onClick}
className={classes}
noClasses
>
<Icon className={iconClasses} id={icon} size={iconSize} />
{
!!title &&
<Text color='white'>
{title}
</Text>
}
</Button>
)
}
}
NavigationBarButton.propTypes = {
title: PropTypes.string,
icon: PropTypes.string,
to: PropTypes.string,
href: PropTypes.string,
attrTitle: PropTypes.string,
onClick: PropTypes.func,
}
export default NavigationBarButton