Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 1x 10x 1x 10x 10x 10x 10x 10x 10x 10x 10x 1x 10x 1x 1x | import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' const getHoverColor = (disabled, theme) => disabled ? theme['buttonBackgroundColor'] : theme['buttonHoverColor'] const Wrapper = styled.button.attrs({ type: (props) => props.type, })` display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; padding: 10px 30px; box-sizing: border-box; font-size: 18px; color: ${(props) => props.theme['buttonColor']}; background-color: ${(props) => props.theme['buttonBackgroundColor']}; border: none; border-radius: 5px; cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')}; outline: none; transition-duration: 0.3s; transition-timing-function: ease-in-out; opacity: ${(props) => (props.disabled ? 0.5 : 1)}; font-family: ${(props) => props.theme['fontPrimary']}; &:hover { background-color: ${(props) => getHoverColor(props.disabled, props.theme)}; transform: ${(props) => (props.bounced ? 'scale(0.95)' : 'none')}; } ` const Button = ({ children, ...rest }) => ( <Wrapper {...rest}>{children}</Wrapper> ) Button.propTypes = { bounced: PropTypes.bool, children: PropTypes.node, disabled: PropTypes.bool, type: PropTypes.oneOf(['button', 'reset', 'submit']), } Button.defaultProps = { bounced: false, disabled: false, type: 'button', } export default Button |