animated-toast

1import {
2  AlertCircle,
3  AlertTriangle,
4  Bell,
5  CheckCircle,
6  Info,
7  X,
8} from "lucide-react";
9import { AnimatePresence, motion } from "motion/react";
10import * as React from "react";
11import { cn } from "@/lib/utils";
12 
13// Toast Types
14type ToastType = "success" | "error" | "warning" | "info" | "default";
15type ToastPosition =
16  | "top-right"
17  | "top-left"
18  | "top-center"
19  | "bottom-right"
20  | "bottom-left"
21  | "bottom-center";
22 
23interface Toast {
24  id: string;
25  title?: string;
26  message: string;
27  type?: ToastType;
28  duration?: number;
29  action?: {
30    label: string;
31    onClick: () => void;
32  };
33}
34 
35interface ToastContextType {
36  toasts: Toast[];
37  addToast: (toast: Omit<Toast, "id">) => string;
38  removeToast: (id: string) => void;
39  clearAll: () => void;
40}
41 
42const ToastContext = React.createContext<ToastContextType | null>(null);
43 
44// Toast Provider
45interface AnimatedToastProviderProps {
46  children: React.ReactNode;
47  position?: ToastPosition;
48  maxToasts?: number;
49}
50 
51export function AnimatedToastProvider({
52  children,
53  position = "top-right",
54  maxToasts = 5,
55}: AnimatedToastProviderProps) {
56  const [toasts, setToasts] = React.useState<Toast[]>([]);
57 
58  const addToast = React.useCallback(
59    (toast: Omit<Toast, "id">) => {
60      const id = Math.random().toString(36).substr(2, 9);
61      setToasts((prev) => {
62        const newToasts = [...prev, { ...toast, id }];
63        return newToasts.slice(-maxToasts);
64      });
65      return id;
66    },
67    [maxToasts],
68  );
69 
70  const removeToast = React.useCallback((id: string) => {
71    setToasts((prev) => prev.filter((t) => t.id !== id));
72  }, []);
73 
74  const clearAll = React.useCallback(() => {
75    setToasts([]);
76  }, []);
77 
78  const positionClasses: Record<ToastPosition, string> = {
79    "top-right": "top-4 right-4",
80    "top-left": "top-4 left-4",
81    "top-center": "top-4 left-1/2 -translate-x-1/2",
82    "bottom-right": "bottom-4 right-4",
83    "bottom-left": "bottom-4 left-4",
84    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
85  };
86 
87  const isTop = position.startsWith("top");
88 
89  return (
90    <ToastContext.Provider value={{ toasts, addToast, removeToast, clearAll }}>
91      {children}
92      <div
93        className={cn(
94          "pointer-events-none fixed z-50 flex flex-col gap-2",
95          positionClasses[position],
96        )}
97      >
98        <AnimatePresence mode="popLayout">
99          {(isTop ? toasts : [...toasts].reverse()).map((toast, index) => (
100            <ToastItem
101              key={toast.id}
102// … truncated