Spaces:
Paused
Paused
File size: 1,741 Bytes
0b9dc2e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | import { Loader2, CheckCircle, CircleAlert } from 'lucide-react';
import { useState } from 'react';
import type { ReactNode } from 'react';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} from '@/components/ui/dialog';
import { useTranslation } from '@/i18n/useI18n';
interface Props {
open: boolean;
onOpenChange: (open: boolean) => void;
title: string;
description?: ReactNode;
confirmLabel?: string;
onConfirm: () => Promise<void>;
}
export function DeleteDialog({
open,
onOpenChange,
title,
description,
confirmLabel,
onConfirm,
}: Props) {
const { t } = useTranslation();
const [deleting, setDeleting] = useState(false);
const handleConfirm = async () => {
setDeleting(true);
try {
await onConfirm();
onOpenChange(false);
} finally {
setDeleting(false);
}
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-sm">
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
{description && <DialogDescription>{description}</DialogDescription>}
</DialogHeader>
<DialogFooter>
<Button variant="ghost" onClick={() => onOpenChange(false)} disabled={deleting}>
<CircleAlert className="size-3.5" />
{t('common.cancel')}
</Button>
<Button onClick={handleConfirm} disabled={deleting} autoFocus>
{deleting ? (
<Loader2 className="size-3.5 animate-spin" />
) : (
<CheckCircle className="size-3.5" />
)}
{confirmLabel ?? t('common.confirm')}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
|