index.tsx
56 lines
| 1 | import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; |
| 2 | import cx from 'classnames'; |
| 3 | |
| 4 | import './style.scss'; |
| 5 | |
| 6 | type ButtonProps = { |
| 7 | classnames?: string; |
| 8 | icon?: any; |
| 9 | children: React.ReactNode; |
| 10 | onClick?: () => void; |
| 11 | href?: string; |
| 12 | type?: 'button' | 'submit' | 'reset'; |
| 13 | variant?: boolean; |
| 14 | disabled?: boolean; |
| 15 | }; |
| 16 | |
| 17 | const Button = ({icon, children, onClick, href, type, variant, disabled, classnames, ...rest}: ButtonProps) => { |
| 18 | const handleHrefClick = (e) => { |
| 19 | e.preventDefault(); |
| 20 | window.parent.location = href; |
| 21 | }; |
| 22 | |
| 23 | if (href) { |
| 24 | return ( |
| 25 | <a |
| 26 | className="give-donor-dashboard-button give-donor-dashboard-button--primary" |
| 27 | onClick={(e) => handleHrefClick(e)} |
| 28 | href={href} |
| 29 | {...rest} |
| 30 | > |
| 31 | <span> |
| 32 | {children} |
| 33 | {icon && <FontAwesomeIcon icon={icon} />} |
| 34 | </span> |
| 35 | </a> |
| 36 | ); |
| 37 | } |
| 38 | return ( |
| 39 | <button |
| 40 | className={cx('give-donor-dashboard-button', classnames, { |
| 41 | ['give-donor-dashboard-button--primary']: !variant, |
| 42 | ['give-donor-dashboard-button--variant']: variant, |
| 43 | ['disabled']: disabled, |
| 44 | })} |
| 45 | onClick={onClick ? () => onClick() : null} |
| 46 | type={type} |
| 47 | disabled={disabled} |
| 48 | {...rest} |
| 49 | > |
| 50 | <span>{children}</span> |
| 51 | {icon && <FontAwesomeIcon icon={icon} />} |
| 52 | </button> |
| 53 | ); |
| 54 | }; |
| 55 | export default Button; |
| 56 |