animated-toast-demo

1"use client";
2 
3import {
4  AnimatedToastProvider,
5  useAnimatedToast,
6} from "@/registry/default/ui/animated-toast";
7 
8function ToastDemoContent() {
9  const { addToast } = useAnimatedToast();
10 
11  const showToast = (
12    type: "success" | "error" | "warning" | "info" | "default",
13  ) => {
14    addToast({
15      title: `${type.charAt(0).toUpperCase() + type.slice(1)} Toast`,
16      message: `This is a ${type} notification message.`,
17      type,
18      duration: 4000,
19    });
20  };
21 
22  const showToastWithAction = () => {
23    addToast({
24      title: "Action Required",
25      message: "This toast has an action button.",
26      type: "info",
27      action: {
28        label: "Click me",
29        onClick: () => alert("Action clicked!"),
30      },
31    });
32  };
33 
34  return (
35    <div className="flex flex-wrap gap-4">
36      <button
37        onClick={() => showToast("success")}
38        className="rounded-md bg-green-500 px-4 py-2 text-white transition-colors hover:bg-green-600"
39      >
40        Success Toast
41      </button>
42      <button
43        onClick={() => showToast("error")}
44        className="rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600"
45      >
46        Error Toast
47      </button>
48      <button
49        onClick={() => showToast("warning")}
50        className="rounded-md bg-yellow-500 px-4 py-2 text-white transition-colors hover:bg-yellow-600"
51      >
52        Warning Toast
53      </button>
54      <button
55        onClick={() => showToast("info")}
56        className="rounded-md bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
57      >
58        Info Toast
59      </button>
60      <button
61        onClick={() => showToast("default")}
62        className="rounded-md bg-gray-500 px-4 py-2 text-white transition-colors hover:bg-gray-600"
63      >
64        Default Toast
65      </button>
66      <button
67        onClick={showToastWithAction}
68        className="rounded-md bg-purple-500 px-4 py-2 text-white transition-colors hover:bg-purple-600"
69      >
70        Toast with Action
71      </button>
72    </div>
73  );
74}
75 
76export default function AnimatedToastDemo() {
77  return (
78    <AnimatedToastProvider position="top-right" maxToasts={3}>
79      <div className="p-8">
80        <ToastDemoContent />
81      </div>
82    </AnimatedToastProvider>
83  );
84}