80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import { Button } from "@pswui/Button";
|
|
import {
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogOverlay,
|
|
DialogRoot,
|
|
DialogSubtitle,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@pswui/Dialog";
|
|
import { useToast } from "@pswui/Toast";
|
|
|
|
export function DeletingItem() {
|
|
const { toast } = useToast();
|
|
|
|
return (
|
|
<DialogRoot>
|
|
<DialogTrigger>
|
|
<Button preset="danger">Delete Item</Button>
|
|
</DialogTrigger>
|
|
<DialogOverlay>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Delete Item</DialogTitle>
|
|
<DialogSubtitle>
|
|
Are you sure you want to delete this item?
|
|
</DialogSubtitle>
|
|
</DialogHeader>
|
|
<div className="flex flex-col gap-3">
|
|
<ul className="list-disc list-inside">
|
|
<li>This action will delete the item, and related data</li>
|
|
<li>This action cannot be undone</li>
|
|
</ul>
|
|
</div>
|
|
<DialogFooter>
|
|
<DialogClose>
|
|
<Button
|
|
preset="danger"
|
|
onClick={async () => {
|
|
const toasted = toast({
|
|
title: "Deleting Item",
|
|
description: "Item deletion is requested",
|
|
status: "loading",
|
|
});
|
|
|
|
await new Promise((r) => setTimeout(r, 1000));
|
|
|
|
toasted.update({
|
|
title: "Item Deleted",
|
|
description: "The item has been deleted",
|
|
status: "success",
|
|
});
|
|
}}
|
|
>
|
|
Delete
|
|
</Button>
|
|
</DialogClose>
|
|
<DialogClose>
|
|
<Button
|
|
preset="default"
|
|
onClick={() => {
|
|
toast({
|
|
title: "Action Canceled",
|
|
description: "The delete action has been canceled",
|
|
status: "error",
|
|
});
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</DialogOverlay>
|
|
</DialogRoot>
|
|
);
|
|
}
|