51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
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>
|
|
);
|
|
}
|