animated-toast-stacked-demo

1"use client";
2 
3import { useState } from "react";
4import {
5  StackedNotifications,
6  type StackedToast,
7} from "@/registry/default/ui/animated-toast";
8 
9export default function AnimatedToastStackedDemo() {
10  const [toasts, setToasts] = useState<StackedToast[]>([]);
11 
12  const addToast = (
13    type: "success" | "error" | "warning" | "info" | "default",
14  ) => {
15    const newToast: StackedToast = {
16      id: Math.random().toString(36).substr(2, 9),
17      title: `${type.charAt(0).toUpperCase() + type.slice(1)} Notification`,
18      message: `This is a ${type} notification that will stack with others.`,
19      type,
20    };
21    setToasts((prev) => [newToast, ...prev]);
22  };
23 
24  const removeToast = (id: string) => {
25    setToasts((prev) => prev.filter((toast) => toast.id !== id));
26  };
27 
28  return (
29    <div className="p-8">
30      <div className="mb-8 flex flex-wrap gap-4">
31        <button
32          onClick={() => addToast("success")}
33          className="rounded-md bg-green-500 px-4 py-2 text-white transition-colors hover:bg-green-600"
34        >
35          Add Success
36        </button>
37        <button
38          onClick={() => addToast("error")}
39          className="rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600"
40        >
41          Add Error
42        </button>
43        <button
44          onClick={() => addToast("warning")}
45          className="rounded-md bg-yellow-500 px-4 py-2 text-white transition-colors hover:bg-yellow-600"
46        >
47          Add Warning
48        </button>
49        <button
50          onClick={() => addToast("info")}
51          className="rounded-md bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
52        >
53          Add Info
54        </button>
55      </div>
56 
57      <p className="text-muted-foreground text-sm">
58        Click buttons to add stacked notifications. They will appear in the
59        top-right corner.
60      </p>
61 
62      <StackedNotifications
63        toasts={toasts}
64        onRemove={removeToast}
65        maxVisible={3}
66      />
67    </div>
68  );
69}