WIP

src/components/generic/Button.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { FiCheck } from 'react-icons/fi';
+
 type DefaultButtonProps = JSX.IntrinsicElements['button'];
 
 interface ButtonProps extends DefaultButtonProps {
@@ -7,6 +9,7 @@ interface ButtonProps extends DefaultButtonProps {
   circle?: boolean;
   active?: boolean;
   border?: boolean;
+  confirmAction?: () => void;
 }
 
 export const Button = ({
@@ -15,12 +18,28 @@ export const Button = ({
   className,
   active,
   border,
+  confirmAction,
   disabled,
   children,
   ...props
 }: ButtonProps): JSX.Element => {
+  const [hasConfirmed, setHasConfirmed] = React.useState(false);
+
+  const handleConfirm = (): void => {
+    if (typeof confirmAction == 'function') {
+      if (hasConfirmed) {
+        void confirmAction();
+      }
+      setHasConfirmed(true);
+      setTimeout(() => {
+        setHasConfirmed(false);
+      }, 3000);
+    }
+  };
+
   return (
     <button
+      onClick={handleConfirm}
       className={`items-center  select-none flex dark:text-white active:scale-95 ${
         active && !disabled ? 'bg-gray-100 dark:bg-gray-700' : ''
       } ${
@@ -38,7 +57,7 @@ export const Button = ({
             circle ? 'mx-auto' : ''
           }`}
         >
-          {icon}
+          {hasConfirmed ? <FiCheck /> : icon}
         </div>
       )}