Merge pull request #273 from setlife-network/ol/fix-button-only

fixes #270

Author: otech47

components/Button.tsx

@@ -3,40 +3,32 @@ import React from 'react'
 interface ButtonProps {
     children: any,
     className?: string,
-    link?: string | undefined,
+    link?: string | null,
     variant?: string,
     disabled?: boolean
 }
 
-const variants = [
-    {
-        'primary': {
-            'background': 'bg-light-gray',
-            'border': 'border-2 border-light-gray',
-            'color': 'text-primary'
-        }
+const variants = {
+    'primary': {
+        'background': 'bg-light-gray',
+        'border': 'border-2 border-light-gray',
+        'color': 'text-primary'
     },
-    {
-        'secondary': {
-            'background': 'bg-solid-white',
-            'border': 'border-2 border-primary',
-            'color': 'text-primary'
-        }
-    }, 
-    {
-        'tertiary': {
-            'background': 'bg-primary',
-            'border': '',
-            'color': 'text-solid-white'
-        }
+    'secondary': {
+        'background': 'bg-solid-white',
+        'border': 'border-2 border-primary',
+        'color': 'text-primary'
     },
-    {
-        'dark': {
-            'background': 'bg-solid-black',
-            'color': 'text-solid-white' 
-        }
+    'tertiary': {
+        'background': 'bg-primary',
+        'border': '',
+        'color': 'text-solid-white'
+    },
+    'dark': {
+        'background': 'bg-solid-black',
+        'color': 'text-solid-white' 
     }
-]
+}
 
 const Button = ({
     children,
@@ -46,7 +38,32 @@ const Button = ({
     className
 }: ButtonProps) => {
 
-    const styleProps: any = Object.values(variants.filter(v => Object.keys(v)[0] == variant)[0])[0]
+    const styleProps = variants[variant || 'primary'];
+
+    const buttonContent = (
+        <>
+            {children}
+        </>
+    );
+
+    if (link) {
+        return (
+            <a 
+                href={link}
+                className={`
+                    Button
+                    rounded-full
+                    py-4
+                    ${disabled ? 'bg-light-gray' : styleProps.background}
+                    ${styleProps.border}
+                    ${styleProps.color}
+                    ${className}
+                `}
+            >
+                {buttonContent}
+            </a>
+        )
+    }
 
     return (
         <button 
@@ -62,9 +79,7 @@ const Button = ({
             type='button'
             disabled={disabled}
         >
-            <a href={link}>
-                { children }
-            </a>
+            {buttonContent}
         </button>
     )
 }
@@ -76,4 +91,5 @@ Button.defaultProps = {
     className: ''
 }
 
-export default Button
+export default Button
+