1import React, { useState, useEffect } from "react";
2
3type ToastType = "success" | "error" | "info" | "warning";
4
5interface Toast {
6  id: number;
7  message: string;
8  type: ToastType;
9}
10
11return function AmazingToasts() {
12  const [toasts, setToasts] = useState<Toast[]>([]);
13
14  const showToast = (message: string, type: ToastType) => {
15    const id = Date.now();
16    setToasts((prev) => [...prev, { id, message, type }]);
17    setTimeout(() => {
18      setToasts((prev) => prev.filter((t) => t.id !== id));
19    }, 3000);
20  };
21
22  return (
23    <section className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-gray-900 to-black text-white px-4 relative overflow-hidden">
24      <h2 className="text-3xl md:text-4xl font-bold mb-6">
25        Amazing Toasts Showcase
26      </h2>
27
28      <div className="flex flex-wrap justify-center gap-4">
29        <button
30          onClick={() => showToast("Operation successful!", "success")}
31          className="px-6 py-3 rounded-lg bg-emerald-600 hover:bg-emerald-700 font-medium transition"
32        >
33          Show Success Toast
34        </button>
35        <button
36          onClick={() => showToast("Something went wrong!", "error")}
37          className="px-6 py-3 rounded-lg bg-rose-600 hover:bg-rose-700 font-medium transition"
38        >
39          Show Error Toast
40        </button>
41        <button
42          onClick={() => showToast("Just some info for you!", "info")}
43          className="px-6 py-3 rounded-lg bg-sky-600 hover:bg-sky-700 font-medium transition"
44        >
45          Show Info Toast
46        </button>
47        <button
48          onClick={() => showToast("Be careful next time!", "warning")}
49          className="px-6 py-3 rounded-lg bg-amber-500 hover:bg-amber-600 font-medium transition"
50        >
51          Show Warning Toast
52        </button>
53      </div>
54
55      {/* Toast Container */}
56      <div className="fixed top-5 right-5 z-50 space-y-3">
57        {toasts.map((toast) => (
58          <div
59            key={toast.id}
60            className={`flex items-center gap-3 px-5 py-3 rounded-xl shadow-lg border-l-4 animate-toastIn ${
61              toast.type === "success"
62                ? "bg-emerald-600/90 border-emerald-400"
63                : toast.type === "error"
64                ? "bg-rose-600/90 border-rose-400"
65                : toast.type === "info"
66                ? "bg-sky-600/90 border-sky-400"
67                : "bg-amber-500/90 border-amber-300"
68            }`}
69          >
70            <span className="text-white font-medium">{toast.message}</span>
71          </div>
72        ))}
73      </div>
74
75      <style jsx>{`
76        @keyframes toastIn {
77          from {
78            opacity: 0;
79            transform: translateX(100%);
80          }
81          to {
82            opacity: 1;
83            transform: translateX(0);
84          }
85        }
86        .animate-toastIn {
87          animation: toastIn 0.4s ease-out forwards;
88        }
89      `}</style>
90    </section>
91  );
92}
93