feat: add Input component

1 files changed, 14 insertions, 14 deletions

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index bf98755..b715ba9 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,14 +1,13 @@
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
-export type Props = Partial<{
-  onClick: () => void;
-  route: string;
-  variant: 'contained' | 'outlined';
-  size: 'sm' | 'md' | 'lg';
-  children: string;
-}>
-
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  onClick?: () => void;
+  route?: string;
+  variant?: 'contained' | 'outlined';
+  size?: 'sm' | 'md' | 'lg';
+  children?: string;
+}
 
 const variants = {
   contained: 'bg-black text-white',
@@ -21,18 +20,19 @@ const sizes = {
   sm: 'p-3',
 };
 
-const Button: React.FC<Props> = ({ onClick, route, variant = 'contained', size = 'md', children }) => {
+const style = 'm-3 font-bold tracking-wide hover:underline focus:outline-none border-2 border-black';
+
+const Button: React.FC<Props> = ({ onClick, route, variant = 'contained', size = 'md', type = 'button', ...props }) => {
   const history = useHistory();
   const navigateRoute = useCallback(() => history.push(route || '/'), [route, history]);
 
   return (
     <button
-      type="button"
+      type={type}
       onClick={route ? navigateRoute : onClick}
-      className={`m-3 font-bold tracking-wide hover:underline focus:outline-none border-2 border-black ${variants[variant]} ${sizes[size]}`}
-    >
-      {children}
-    </button>
+      className={`${style} ${variants[variant]} ${sizes[size]}`}
+      {...props}
+    />
   );
 };