FEAT: add button component

src/components/ButtonCard.tsx

@@ -4,10 +4,74 @@ import React from 'react';
 import colors from '../utils/colors';
 import fontawesome from '../utils/fontawesome';
 
-function ButtonCard() {
-  // return ();
+const defaultProps = {
+  className: 'btn',
+  disabled: false,
+  backgroundColor: colors.theme.ligth_blue,
+  text: 'LISTA DE ALUNOS',
+  icon: fontawesome.icons.faComments,
+  color: colors.theme.white,
+  sizeIcon: '1.125em',
+  textSize: '1em',
+  onClick: () => {
+    alert('clicou');
+  },
+};
+
+type ButtonProps = {
+  className?: string;
+  disabled?: boolean;
+  backgroundColor?: string;
+  text?: string;
+  color?: string;
+  icon?: string;
+  sizeIcon?: string;
+  textSize?: string;
+  onClick?: () => void;
+} & typeof defaultProps;
+
+function ButtonCard(props: ButtonProps) {
+  const {
+    className,
+    text,
+    disabled,
+    backgroundColor,
+    color,
+    icon,
+    sizeIcon,
+    textSize,
+    onClick,
+  } = props;
+
+  const styles = {
+    button: {
+      margin: '0.5rem',
+      backgroundColor,
+      color,
+      fontSize: textSize,
+      fontStyle: 'roboto',
+      fontWeight: '900',
+    },
+    icon: {
+      marginRight: '0.5rem',
+      fontSize: `${sizeIcon}`,
+    },
+  };
+
+  return (
+    <button
+      className={className}
+      style={styles.button}
+      type="submit"
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <FontAwesomeIcon icon={icon} style={styles.icon} />
+      {text}
+    </button>
+  );
 }
 
-const styles = {};
+ButtonCard.defaultProps = defaultProps;
 
 export default ButtonCard;

.eslintrc.json

@@ -27,6 +27,7 @@
     ],
     "rules": {
         "camelcase": "off",
+        "no-alert": "off",
         "import/no-unresolved": "error",
         "@typescript-eslint/naming-convention": [
             "error",