diff options
Diffstat (limited to 'src/components/Button.tsx')
-rw-r--r-- | src/components/Button.tsx | 28 |
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} + /> ); }; |