Fix TS typing error

components/Button/index.tsx

@@ -1,22 +1,8 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react'
+import React from 'react'
 import classNames from 'classnames'
 
-import Link from 'next/link'
-
-import AddIcon from '~public/icons/Add.svg'
-import CheckIcon from '~public/icons/LargeCheck.svg'
-import CrossIcon from '~public/icons/Cross.svg'
-import EditIcon from '~public/icons/Edit.svg'
-import LinkIcon from '~public/icons/Link.svg'
-import MenuIcon from '~public/icons/Menu.svg'
-import SaveIcon from '~public/icons/Save.svg'
-import SettingsIcon from '~public/icons/Settings.svg'
-
 import './index.scss'
 
-import { ButtonType } from '~utils/enums'
-import { access } from 'fs'
-
 interface Props
   extends React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -26,7 +12,7 @@ interface Props
   active?: boolean
   blended?: boolean
   contained?: boolean
-  size?: 'small' | 'medium' | 'large'
+  size: 'small' | 'medium' | 'large'
   text?: string
 }
 
@@ -34,7 +20,7 @@ const defaultProps = {
   active: false,
   blended: false,
   contained: false,
-  size: 'medium',
+  size: 'medium' as const,
 }
 
 const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
@@ -47,12 +33,8 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
       Active: active,
       Blended: blended,
       Contained: contained,
-      // 'btn-pressed': pressed,
-      // 'btn-disabled': disabled,
-      // save: props.icon === 'save',
-      // destructive: props.type == ButtonType.Destructive,
     },
-    size,
+    buttonSize,
     props.className
   )
 
@@ -70,117 +52,6 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
       {hasText()}
     </button>
   )
-
-  // useEffect(() => {
-  // if (props.type) setButtonType(props.type)
-  // }, [props.type])
-
-  // const addIcon = (
-  //   <span className="icon">
-  //     <AddIcon />
-  //   </span>
-  // )
-
-  // const menuIcon = (
-  //   <span className="icon">
-  //     <MenuIcon />
-  //   </span>
-  // )
-
-  // const linkIcon = (
-  //   <span className="icon stroke">
-  //     <LinkIcon />
-  //   </span>
-  // )
-
-  // const checkIcon = (
-  //   <span className="icon check">
-  //     <CheckIcon />
-  //   </span>
-  // )
-
-  // const crossIcon = (
-  //   <span className="icon">
-  //     <CrossIcon />
-  //   </span>
-  // )
-
-  // const editIcon = (
-  //   <span className="icon">
-  //     <EditIcon />
-  //   </span>
-  // )
-
-  // const saveIcon = (
-  //   <span className="icon stroke">
-  //     <SaveIcon />
-  //   </span>
-  // )
-
-  // const settingsIcon = (
-  //   <span className="icon settings">
-  //     <SettingsIcon />
-  //   </span>
-  // )
-
-  // function getIcon() {
-  //   let icon: React.ReactNode
-
-  //   switch (props.icon) {
-  //     case 'new':
-  //       icon = addIcon
-  //       break
-  //     case 'menu':
-  //       icon = menuIcon
-  //       break
-  //     case 'link':
-  //       icon = linkIcon
-  //       break
-  //     case 'check':
-  //       icon = checkIcon
-  //       break
-  //     case 'cross':
-  //       icon = crossIcon
-  //       break
-  //     case 'edit':
-  //       icon = editIcon
-  //       break
-  //     case 'save':
-  //       icon = saveIcon
-  //       break
-  //     case 'settings':
-  //       icon = settingsIcon
-  //       break
-  //   }
-
-  //   return icon
-  // }
-
-  // function handleMouseDown() {
-  //   setPressed(true)
-  // }
-
-  // function handleMouseUp() {
-  //   setPressed(false)
-  // }
-  // return (
-  //   <button
-  //     className={classes}
-  //     disabled={disabled}
-  //     onMouseDown={handleMouseDown}
-  //     onMouseUp={handleMouseUp}
-  //     ref={forwardedRef}
-  //     {...props}
-  //   >
-  //     {getIcon()}
-
-  //     {props.type != ButtonType.IconOnly ? (
-  //       <span className="text">{children}</span>
-  //     ) : (
-  //       ''
-  //     )}
-  //   </button>
-  // )
 })
 
 Button.defaultProps = defaultProps