65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
import { makeStyles } from '@material-ui/core/styles'
|
|
import classnames from 'classnames'
|
|
import React, { memo } from 'react'
|
|
|
|
import baseButtonStyles from './BaseButton.styles'
|
|
|
|
const { baseButton, primary } = baseButtonStyles
|
|
|
|
const styles = {
|
|
featureButton: {
|
|
extend: baseButton,
|
|
width: baseButton.height,
|
|
borderRadius: baseButton.height / 2,
|
|
display: 'flex',
|
|
padding: 0
|
|
},
|
|
primary,
|
|
buttonIcon: {
|
|
margin: 'auto',
|
|
'& svg': {
|
|
width: 16,
|
|
height: 16,
|
|
overflow: 'visible',
|
|
'& g': {
|
|
strokeWidth: 1.8
|
|
}
|
|
}
|
|
},
|
|
buttonIconActive: {} // required to extend primary
|
|
}
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const FeatureButton = memo(
|
|
({ className, Icon, InverseIcon, children, ...props }) => {
|
|
const classes = useStyles()
|
|
|
|
const classNames = {
|
|
[classes.featureButton]: true,
|
|
[classes.primary]: true
|
|
}
|
|
|
|
return (
|
|
<button className={classnames(classNames, className)} {...props}>
|
|
{Icon && (
|
|
<div className={classes.buttonIcon}>
|
|
<Icon />
|
|
</div>
|
|
)}
|
|
{InverseIcon && (
|
|
<div
|
|
className={classnames(
|
|
classes.buttonIcon,
|
|
classes.buttonIconActive
|
|
)}>
|
|
<InverseIcon />
|
|
</div>
|
|
)}
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default FeatureButton
|