66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import { useState, type ReactNode } from "react";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "~/components/ui/alert-dialog";
|
|
import Loader from "../loader";
|
|
import { delay } from "~/features/delay";
|
|
import { Button } from "../ui/button";
|
|
|
|
export function ConfirmAlert({
|
|
children,
|
|
title = "Bạn có chắc không?",
|
|
description = "Hành động này không thể hoàn tác.",
|
|
onConfirm,
|
|
}: {
|
|
children: ReactNode;
|
|
title?: string;
|
|
description?: string;
|
|
onConfirm: () => void | Promise<void>;
|
|
}) {
|
|
const [loading, setLoading] = useState(false);
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<AlertDialog open={open} onOpenChange={setOpen}>
|
|
<AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{title}</AlertDialogTitle>
|
|
<AlertDialogDescription>{description}</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={loading}>Hủy</AlertDialogCancel>
|
|
<Button
|
|
disabled={loading}
|
|
onClick={async (e) => {
|
|
e.stopPropagation();
|
|
// Set loading
|
|
setLoading(true);
|
|
|
|
// Set delay 0.5s cho cảm giác dễ chịu khi sử dụng
|
|
await delay(500);
|
|
|
|
// Gọi callback
|
|
await onConfirm?.();
|
|
|
|
// Tắt modal và loading
|
|
setLoading(false);
|
|
setOpen(false);
|
|
}}
|
|
>
|
|
Tiếp tục
|
|
{loading && <Loader color="white" size="size-3" />}
|
|
</Button>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
}
|