WIP

src/components/generic/Button.tsx

@@ -1,28 +1,50 @@
 import React from 'react';
 
-import MaterialButton from '@material-ui/core/Button';
-import type { ButtonProps as MaterialButtonProps } from '@material-ui/core/Button/Button';
+type DefaultButtonProps = JSX.IntrinsicElements['button'];
 
 interface LocalButtonProps {
-  text: string;
   icon?: JSX.Element;
+  circle?: boolean;
+  active?: boolean;
+  border?: boolean;
 }
 
-export type ButtonProps = MaterialButtonProps & LocalButtonProps;
+export type ButtonProps = LocalButtonProps & DefaultButtonProps;
 
-export const Button = ({ text, icon, ...props }: ButtonProps): JSX.Element => {
+export const Button = ({
+  icon,
+  circle,
+  className,
+  active,
+  border,
+  disabled,
+  children,
+  ...props
+}: ButtonProps): JSX.Element => {
   return (
-    <MaterialButton
+    <button
+      className={`items-center  select-none flex dark:text-white ${
+        active && !disabled ? 'bg-gray-100 dark:bg-gray-700' : ''
+      } ${
+        circle ? 'rounded-full h-10 w-10' : 'rounded-md p-3 space-x-3 text-sm'
+      } ${
+        disabled
+          ? 'cursor-not-allowed dark:bg-primaryDark bg-white'
+          : 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 hover:shadow-md'
+      } ${border ? 'border dark:border-gray-600' : ''} ${className}`}
       {...props}
-      className="dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
     >
-      <div className="flex p-3">
-        {icon &&
-          React.cloneElement(icon, {
-            className: 'h-6 w-6 mr-3 text-gray-500 dark:text-gray-400',
-          })}
-        <span>{text}</span>
-      </div>
-    </MaterialButton>
+      {icon && (
+        <div
+          className={`text-gray-500 dark:text-gray-400 ${
+            circle ? 'mx-auto' : ''
+          }`}
+        >
+          {icon}
+        </div>
+      )}
+
+      <span>{children}</span>
+    </button>
   );
 };