Add fancy ButtonWithConfirm

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>
+  );
+}