website refactor

apps/website/ui/Button.tsx

@@ -1,7 +1,8 @@
-import React, { ReactNode, MouseEventHandler, ButtonHTMLAttributes } from 'react';
+import React, { ReactNode, MouseEventHandler, ButtonHTMLAttributes, ElementType } from 'react';
 import { Stack } from './Stack';
+import { Box, BoxProps } from './Box';
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as' | 'onMouseEnter' | 'onMouseLeave' | 'onSubmit'>, Omit<BoxProps<'button'>, 'as' | 'onClick' | 'onSubmit'> {
   children: ReactNode;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   className?: string;
@@ -72,30 +73,34 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
 
   if (as === 'a') {
     return (
-      <a 
+      <Box
+        as="a"
         href={href}
         target={target}
         rel={rel}
         className={classes}
-        {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+        {...(props as any)}
       >
         {content}
-      </a>
+      </Box>
     );
   }
 
   return (
-    <button 
-      ref={ref}
+    <Box 
+      as="button"
+      ref={ref as any}
       type={type}
       className={classes}
-      onClick={onClick}
+      onClick={onClick as any}
       disabled={disabled}
-      {...props}
+      {...(props as any)}
     >
       {content}
-    </button>
+    </Box>
   );
 });
 
 Button.displayName = 'Button';
+
+export default Button;