71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
import { Trash2 } from 'lucide-react';
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from '@kit/ui/alert-dialog';
|
|
import { Button } from '@kit/ui/button';
|
|
|
|
interface DeleteConfirmButtonProps {
|
|
title: string;
|
|
description: string;
|
|
isPending?: boolean;
|
|
onConfirm: () => void;
|
|
}
|
|
|
|
export function DeleteConfirmButton({
|
|
title,
|
|
description,
|
|
isPending,
|
|
onConfirm,
|
|
}: DeleteConfirmButtonProps) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<AlertDialog open={open} onOpenChange={setOpen}>
|
|
<AlertDialogTrigger
|
|
render={
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
data-test="file-delete-btn"
|
|
disabled={isPending}
|
|
onClick={(e: React.MouseEvent) => e.stopPropagation()}
|
|
>
|
|
<Trash2 className="text-destructive h-4 w-4" />
|
|
</Button>
|
|
}
|
|
/>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{title}</AlertDialogTitle>
|
|
<AlertDialogDescription>{description}</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Abbrechen</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
onClick={() => {
|
|
onConfirm();
|
|
setOpen(false);
|
|
}}
|
|
>
|
|
{isPending ? 'Wird gelöscht...' : 'Löschen'}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
}
|