79 lines
1.5 KiB
JavaScript
79 lines
1.5 KiB
JavaScript
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 |