animated-toast-minimal-demo

1"use client";
2 
3import { useState } from "react";
4import { MinimalToast } from "@/registry/default/ui/animated-toast";
5 
6export default function AnimatedToastMinimalDemo() {
7  const [showToast, setShowToast] = useState(false);
8 
9  const triggerToast = (
10    _type: "success" | "error" | "warning" | "info" | "default",
11  ) => {
12    setShowToast(true);
13    setTimeout(() => setShowToast(false), 3000);
14  };
15 
16  return (
17    <div className="p-8">
18      <div className="flex flex-wrap gap-4">
19        <button
20          onClick={() => triggerToast("success")}
21          className="rounded-md bg-green-500 px-4 py-2 text-white transition-colors hover:bg-green-600"
22        >
23          Success
24        </button>
25        <button
26          onClick={() => triggerToast("error")}
27          className="rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600"
28        >
29          Error
30        </button>
31        <button
32          onClick={() => triggerToast("warning")}
33          className="rounded-md bg-yellow-500 px-4 py-2 text-white transition-colors hover:bg-yellow-600"
34        >
35          Warning
36        </button>
37        <button
38          onClick={() => triggerToast("info")}
39          className="rounded-md bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
40        >
41          Info
42        </button>
43        <button
44          onClick={() => triggerToast("default")}
45          className="rounded-md bg-gray-500 px-4 py-2 text-white transition-colors hover:bg-gray-600"
46        >
47          Default
48        </button>
49      </div>
50 
51      <MinimalToast
52        open={showToast}
53        onClose={() => setShowToast(false)}
54        message="This is a minimal toast notification!"
55        type="success"
56      />
57    </div>
58  );
59}