43 lines
982 B
JavaScript
43 lines
982 B
JavaScript
import classnames from 'classnames'
|
|
import React, { memo } from 'react'
|
|
|
|
import moduleStyles from './Button.module.css'
|
|
import { spacer } from '../../styling/variables.js'
|
|
|
|
const pickSize = size => {
|
|
switch (size) {
|
|
case 'xl':
|
|
return spacer * 7.625
|
|
case 'sm':
|
|
return spacer * 4
|
|
case 'lg':
|
|
default:
|
|
return spacer * 5
|
|
}
|
|
}
|
|
|
|
const ActionButton = memo(
|
|
({ size = 'lg', children, className, buttonClassName, ...props }) => {
|
|
const height = pickSize(size)
|
|
|
|
return (
|
|
<div className={className} style={{ height: height + height / 12 }}>
|
|
<button
|
|
className={classnames(
|
|
buttonClassName,
|
|
moduleStyles.button,
|
|
'text-white',
|
|
{
|
|
[moduleStyles.buttonSm]: size === 'sm',
|
|
[moduleStyles.buttonXl]: size === 'xl'
|
|
}
|
|
)}
|
|
{...props}>
|
|
{children}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default ActionButton
|