From e63c4f911dcebe7585e021c0ac6d8213e276404c Mon Sep 17 00:00:00 2001
From: Daniel Castillo <dbocastillo@gmail.com>
Date: Mon, 21 Sep 2020 19:34:44 -0600
Subject: [PATCH 1/2] button component

---
 components/Button/Button.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 components/Button/Button.js

diff --git a/components/Button/Button.js b/components/Button/Button.js
new file mode 100644
index 0000000..8283b0c
--- /dev/null
+++ b/components/Button/Button.js
@@ -0,0 +1,19 @@
+export function Button(props){
+    const {className = '', ...restProps} = props;
+    return(
+        <button className={`bg-yellow text-black font-black  text-xl px-6 py-5 hover:shadow-yellow ${className} `} {...restProps}>
+        </button>
+
+    )
+}
+
+
+export function ButtonGray(props){
+    const {className = '', ...restProps} = props;
+    return(
+
+        <Button className={`bg-grey hover:shadow-grey ${className}`} {...restProps}>
+        </Button>
+    )
+}
+

From 742b6e6f82d0d7eec79bba1791fde982fc478bb4 Mon Sep 17 00:00:00 2001
From: Daniel Castillo <dbocastillo@gmail.com>
Date: Mon, 19 Oct 2020 21:38:58 -0600
Subject: [PATCH 2/2] includes a button that needs improvement

---
 components/Button/Button.js | 49 ++++++++++++++++++++++++++++---------
 1 file changed, 38 insertions(+), 11 deletions(-)

diff --git a/components/Button/Button.js b/components/Button/Button.js
index 8283b0c..84e5768 100644
--- a/components/Button/Button.js
+++ b/components/Button/Button.js
@@ -1,19 +1,46 @@
-export function Button(props){
-    const {className = '', ...restProps} = props;
-    return(
-        <button className={`bg-yellow text-black font-black  text-xl px-6 py-5 hover:shadow-yellow ${className} `} {...restProps}>
-        </button>
+import React, {useState} from "react"
+import type from "prop-types"
+
+
+
+/**
+ * The only true button.
+ *
+ * @version 0.0.1
+ * @author [Angel Castillo](https://github.com/x905)
+ * @prop {string} className
+ * @prop {bool} secondary
+ * @prop {string} children
+ */
+const Button = (props) => {
+    const [secondary] = useState( props.secondary)
+    const [className] = useState( props.className)
+    const [children] = useState( props.children)
+    
 
+    return (
+        <button className={`text-black font-black text-xl px-6 py-5  ${secondary ?' bg-grey hover:shadow-grey':'bg-yellow hover:shadow-yellow'}  ${className} `}   >
+            {children}
+        </button>
     )
 }
 
 
-export function ButtonGray(props){
-    const {className = '', ...restProps} = props;
-    return(
 
-        <Button className={`bg-grey hover:shadow-grey ${className}`} {...restProps}>
-        </Button>
-    )
+Button.propTypes = {
+  
+    className: type.string,
+  
+    children: type.node,
+
+    secondary : type.bool,
+    /**
+     * Gets called when the user clicks on the button
+     *
+     * @param {SyntheticEvent} event The react `SyntheticEvent`
+     * @param {Object} allProps All props of this Button
+     */
+    onClick : type.func
 }
 
+export default Button
\ No newline at end of file