1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- import React from 'react'
- import PropTypes from 'prop-types'
- import Radium from 'radium'
- import color from 'color'
- import classnames from 'classnames'
-
- require('./ContentTypeBtn.styl')
-
- export const ContentTypeBtn = props =>
- <div
- className={classnames(`${props.customClass}`, 'contentTypeBtn')}
- style={{
- backgroundColor: props.hexcolor,
- ':hover': {
- backgroundColor: color(props.hexcolor).darken(0.15).hexString()
- }
- }}
- onClick={props.onClickBtn}
- >
- <div className={classnames(`${props.customClass}__text`)}>
- <div className={classnames(`${props.customClass}__text__icon`)}>
- <i className={`fa fa-${props.faIcon}`} />
- </div>
- <div className={classnames(`${props.customClass}__text__title`)}>
- {props.creationLabel}
- </div>
- </div>
- </div>
-
- export default Radium(ContentTypeBtn)
-
- ContentTypeBtn.propTypes = {
- hexcolor: PropTypes.string.isRequired,
- label: PropTypes.string.isRequired,
- faIcon: PropTypes.string.isRequired,
- creationLabel: PropTypes.string.isRequired,
- customClass: PropTypes.string,
- onClickBtn: PropTypes.func
- }
-
- ContentTypeBtn.defaultProps = {
- customClass: ''
- }
|