Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | "use client";
import * as React from "react";
import { Button } from "@/ahuora-design-system/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/ahuora-design-system/ui/dialog";
import { Input } from "@/ahuora-design-system/ui/input";
import { Label } from "@/ahuora-design-system/ui/label";
import { toast } from "sonner";
interface DeleteDialogProps {
fileName: string;
onDelete: () => void;
onCancel: () => void;
}
export default function DeleteDialog({
fileName,
onDelete,
onCancel,
}: DeleteDialogProps) {
const [confirmText, setConfirmText] = React.useState("");
const deleteWord = fileName;
const handleDelete = () => {
if (confirmText === deleteWord) {
onDelete();
} else {
toast.error("Incorrect confirmation text");
}
};
return (
<Dialog open={true}>
<DialogContent
className="sm:max-w-[425px] bg-card text-card-foreground border border-border"
onClose={onCancel}
>
<DialogHeader>
<DialogTitle className="text-xl font-medium">
Delete Flowsheet
</DialogTitle>
<DialogDescription className="">
This action cannot be undone. This will permanently delete{" "}
<span className="font-medium">{fileName}</span> and remove all
associated data.
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="space-y-2">
<Label htmlFor="confirm" className="text-sm ">
Type <span className="font-medium">{deleteWord}</span> to confirm
deletion
</Label>
<Input
id="confirm"
className=" border-zinc-700 bg-transparent focus-visible:ring-red-700 focus-visible:ring-offset-zinc-900"
value={confirmText}
onChange={(e) => setConfirmText(e.target.value)}
placeholder="Type to confirm"
/>
</div>
</div>
<DialogFooter>
<Button variant="secondary" onClick={onCancel}>
Cancel
</Button>
<Button
variant="destructive"
onClick={handleDelete}
disabled={confirmText !== deleteWord}
className="disabled:opacity-50"
>
Delete File
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
|