WIP

src/components/generic/Button.tsx

@@ -1,31 +1,28 @@
 import React from 'react';
 
-export interface ButtonProps {
-  children: React.ReactNode;
-  className?: string;
-  clickAction?: () => void;
-  type?: 'button' | 'submit' | 'reset' | undefined;
+import MaterialButton from '@material-ui/core/Button';
+import type { ButtonProps as MaterialButtonProps } from '@material-ui/core/Button/Button';
+
+interface LocalButtonProps {
+  text: string;
+  icon?: JSX.Element;
 }
 
-export const Button = ({
-  children,
-  className,
-  clickAction,
-  type,
-}: ButtonProps): JSX.Element => {
+export type ButtonProps = MaterialButtonProps & LocalButtonProps;
+
+export const Button = ({ text, icon, ...props }: ButtonProps): JSX.Element => {
   return (
-    <button
-      className={`w-10 h-10 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-800 hover:shadow-inner text-gray-500 dark:text-gray-400 ${
-        className ?? ''
-      }`}
-      onClick={() => {
-        if (clickAction) {
-          clickAction();
-        }
-      }}
-      type={type}
+    <MaterialButton
+      {...props}
+      className="dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
     >
-      <span className="flex justify-center">{children}</span>
-    </button>
+      <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>
   );
 };

src/components/generic/Drawer.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-export interface DrawerProps {
-  open: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-}
-
-export const Drawer = ({
-  open,
-  onClose,
-  children,
-}: DrawerProps): JSX.Element => {
-  return (
-    <>
-      {open && (
-        <div
-          className="z-10 fixed inset-0 transition-opacity"
-          onClick={onClose}
-        >
-          <div
-            className="absolute inset-0 backdrop-filter backdrop-blur"
-            tabIndex={0}
-          ></div>
-        </div>
-      )}
-
-      <aside
-        className={`transform top-0 left-0 w-64 bg-white dark:bg-secondaryDark shadow-md border-r dark:border-gray-600 fixed h-full overflow-auto ease-in-out transition-all duration-300 z-30 ${
-          open ? 'translate-x-0' : '-translate-x-full'
-        }`}
-      >
-        {children}
-      </aside>
-    </>
-  );
-};

src/components/generic/IconButton.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import MaterialIconButton from '@material-ui/core/IconButton';
+import type { IconButtonProps } from '@material-ui/core/IconButton/IconButton';
+
+export const IconButton = ({
+  children,
+  ...props
+}: IconButtonProps): JSX.Element => {
+  return (
+    <MaterialIconButton {...props} className="text-gray-500 dark:text-gray-400">
+      {children}
+    </MaterialIconButton>
+  );
+};