start

src/components/shared/buttons/outline-button.js

@@ -0,0 +1,64 @@
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {withoutWeightColor} from './utils';
+
+class OutlineButton extends Component {
+  getColorClass = () => {
+    const {color, colorWeight, borderWeight, textColor, textColorWeight, disabled} = this.props;
+
+    return classNames(
+      {[textColorWeight ? `text-${textColor}-${textColorWeight}` : `text-${textColor}`]: textColor},
+      {[`text-${color}-${colorWeight}`]: !textColor},
+      {'opacity-40 cursor-not-allowed': disabled},
+      (borderWeight === 1) ? 'border' : `border-${borderWeight}`,
+      withoutWeightColor.includes(color) ? `border-${color}` : `border-${color}-${colorWeight}`,
+      {[`hover:bg-${color}-50`]: !withoutWeightColor.includes(color) && !disabled}
+    );
+  };
+
+  render() {
+    return (
+      <button
+        type={this.props.type}
+        disabled={this.props.disabled}
+        onClick={this.props.onClick}
+        className={classNames(
+          'focus:outline-none rounded-md',
+          this.getColorClass(),
+          {'hover:shadow-lg hover:font-semibold': !this.props.disabled},
+          this.props.className
+        )}
+      >
+        {this.props.children}
+      </button>
+    );
+  }
+}
+
+OutlineButton.defaultProps = {
+  type: 'button',
+  color: 'blue',
+  colorWeight: 500,
+  borderWeight: 1,
+  loading: false,
+  disabled: false
+};
+
+OutlineButton.propTypes = {
+  color: PropTypes.string.isRequired,
+  colorWeight: PropTypes.number.isRequired,
+  borderWeight: PropTypes.number.isRequired,
+  textColor: PropTypes.string,
+  textColorWeight: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node)
+  ]),
+  disabled: PropTypes.bool.isRequired,
+  className: PropTypes.string
+};
+
+export default OutlineButton;