60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import { Trash2, X } from 'lucide-react';
|
|
import React from 'react';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogMedia,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
|
|
interface DeleteConfirmationProps {
|
|
isOpen: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
title?: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
onDelete: () => void;
|
|
cancelText?: string;
|
|
deleteText?: string;
|
|
}
|
|
|
|
export function DeleteConfirmation({
|
|
isOpen,
|
|
onOpenChange,
|
|
title = "Hapus item?",
|
|
description = "Tindakan ini tidak dapat dibatalkan. Item ini akan dihapus secara permanen.",
|
|
onDelete,
|
|
cancelText = "Batal",
|
|
deleteText = "Hapus",
|
|
}: DeleteConfirmationProps) {
|
|
return (
|
|
<AlertDialog open={isOpen} onOpenChange={onOpenChange}>
|
|
<AlertDialogContent size="default">
|
|
<AlertDialogHeader>
|
|
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
|
|
<Trash2 className="size-5" />
|
|
</AlertDialogMedia>
|
|
<AlertDialogTitle>{title}</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
{description}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel variant="outline" className="gap-2">
|
|
<X className="size-4" />
|
|
{cancelText}
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction onClick={onDelete} variant="destructive" className="gap-2">
|
|
<Trash2 className="size-4" />
|
|
{deleteText}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
}
|