animated-toast-undo-demo

1"use client";
2 
3import { useState } from "react";
4import { UndoToast } from "@/registry/default/ui/animated-toast";
5 
6export default function AnimatedToastUndoDemo() {
7  const [showToast, setShowToast] = useState(false);
8  const [message, setMessage] = useState("Item deleted");
9 
10  const deleteItem = () => {
11    setMessage("Item deleted");
12    setShowToast(true);
13  };
14 
15  const undoDelete = () => {
16    setMessage("Deletion undone!");
17    setTimeout(() => setMessage("Item deleted"), 2000);
18  };
19 
20  return (
21    <div className="p-8">
22      <p className="mb-4 text-muted-foreground">{message}</p>
23 
24      <button
25        onClick={deleteItem}
26        className="rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600"
27      >
28        Delete Item
29      </button>
30 
31      <UndoToast
32        open={showToast}
33        onClose={() => setShowToast(false)}
34        onUndo={undoDelete}
35        message="Item deleted successfully"
36        duration={5000}
37      />
38    </div>
39  );
40}