From cfc9d4dc4e2fb551ffaa48572407fcc2958b5153 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 20 Nov 2023 14:28:44 +0100
Subject: [PATCH] Add fancy ButtonWithConfirm

---
 components/inputs/ButtonWithConfirm.tsx | 50 +++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 components/inputs/ButtonWithConfirm.tsx

diff --git a/components/inputs/ButtonWithConfirm.tsx b/components/inputs/ButtonWithConfirm.tsx
new file mode 100644
index 0000000..f56f2c7
--- /dev/null
+++ b/components/inputs/ButtonWithConfirm.tsx
@@ -0,0 +1,50 @@
+import { cn } from "@/lib/utils";
+import { ComponentProps, MouseEventHandler, useEffect, useState } from "react";
+import { Button } from "../ui/button";
+
+interface ButtonWithConfirmProps extends Omit<ComponentProps<typeof Button>, "children"> {
+  readonly text: string;
+  readonly confirmText: string;
+  readonly onClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+export default function ButtonWithConfirm({
+  text,
+  confirmText,
+  onClick,
+  ...restProps
+}: ButtonWithConfirmProps) {
+  const [toConfirm, setToConfirm] = useState(false);
+
+  useEffect(() => {
+    if (!toConfirm) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      setToConfirm(false);
+    }, 3000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [toConfirm]);
+
+  return (
+    <Button
+      size="sm"
+      variant={toConfirm ? "destructive" : "default"}
+      className={cn(toConfirm ? "" : "bg-yellow-300 hover:bg-yellow-300")}
+      onClick={
+        toConfirm
+          ? onClick
+          : () => {
+              setToConfirm(true);
+            }
+      }
+      {...restProps}
+    >
+      {toConfirm ? confirmText : text}
+    </Button>
+  );
+}