gistfile1.txt

import React from "react";
import { Button as SemanticButton } from "semantic-ui-react";
import styled from "styled-components";

const BaseButton = styled(SemanticButton)`
  color: white !important;
  font-family: Rubik, sans-serif !important;
  font-weight: 800 !important;

  &.disabled {
    cursor: not-allowed !important;
    opacity: 0.5 !important; 
  }
`;

const PrimaryButton = styled(BaseButton)`
  background-color: ${(props) => props.theme.accent1};
`;

const SecondaryButton = styled(BaseButton)`
  background-color: ${(props) => props.theme.primary1};
`;

const Button = ({
  children = "Button",
  onClick = false,
  primary = false,
  secondary = false,
  disabled = false
}) => {
  return (
    <>
      {primary && (
        <PrimaryButton
          onClick={() => {
            onClick && onClick();
          }}
          className={disabled && "disabled"}
          disabled={disabled}
        >
          {children}
        </PrimaryButton>
      )}
      {secondary && (
        <SecondaryButton
          onClick={() => {
            onClick && onClick();
          }}
          className={disabled && "disabled"}
          disabled={disabled}
        >
          {children}
        </SecondaryButton>
      )}
      {!primary && !secondary && (
        <SemanticButton
          onClick={() => {
            onClick && onClick();
          }}
          className={disabled && "disabled"}
          disabled={disabled}
        >
          {children}
        </SemanticButton>
      )}
    </>
  );
};

export default Button;