# All files / src/components/ui Toast.tsx

90.32% Statements 28/31
87.5% Branches 7/8
80% Functions 12/15
100% Lines 21/21

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84

    1x

    12x
    12x

    12x
    6x
    6x
    6x

    12x
    1x

    12x
    12x
    12x

    12x

    12x

    12x

    7x
    7x

    1x

    15x
    14x
    12x

     import { createContext, useContext, useState, useCallback, useRef, type ReactNode } from 'react';
    import { CheckCircle, XCircle, Info, AlertTriangle } from 'lucide-react';

    type ToastType = 'success' | 'error' | 'info' | 'warning';

    interface Toast {
      id: number;
      type: ToastType;
      message: string;
    }

    interface ToastContextType {
      toast: (type: ToastType, message: string) => void;
      success: (message: string) => void;
      error: (message: string) => void;
      info: (message: string) => void;
    }

    const ToastContext = createContext<ToastContextType | null>(null);

    export function ToastProvider({ children }: { children: ReactNode }) {
      const [toasts, setToasts] = useState<Toast[]>([]);
      const nextIdRef = useRef(0);

      const addToast = useCallback((type: ToastType, message: string) => {
        const id = ++nextIdRef.current;
        setToasts(prev => [...prev, { id, type, message }]);
        setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 4000);
      }, []);

      const removeToast = useCallback((id: number) => {
        setToasts(prev => prev.filter(t => t.id !== id));
      }, []);

      const success = useCallback((m: string) => addToast('success', m), [addToast]);
      const error = useCallback((m: string) => addToast('error', m), [addToast]);
      const info = useCallback((m: string) => addToast('info', m), [addToast]);

      const typeStyles: Record<ToastType, string> = {
        success: 'bg-green-bg text-green border-l-4 border-green',
        error: 'bg-red-bg text-red border-l-4 border-red',
        info: 'bg-accent-bg text-accent border-l-4 border-accent',
        warning: 'bg-yellow-bg text-yellow border-l-4 border-yellow',
      };

      const typeIcons: Record<ToastType, typeof CheckCircle> = {
        success: CheckCircle,
        error: XCircle,
        info: Info,
        warning: AlertTriangle,
      };

      return (
        <ToastContext.Provider value={{ toast: addToast, success, error, info }}>
          {children}
          <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm animate-fade-in">
            {toasts.map(t => {
              const Icon = typeIcons[t.type];
              return (
                <div
                  key={t.id}
                  className={`flex items-center gap-3 px-4 py-3 rounded-card border shadow-elevated text-sm ${typeStyles[t.type]}`}
                >
                  <Icon className={`w-4 h-4 flex-shrink-0 ${
                    t.type === 'success' ? 'text-green' :
                    t.type === 'error' ? 'text-red' :
                    t.type === 'warning' ? 'text-yellow' : 'text-accent'
                  }`} />
                  <span className="flex-1">{t.message}</span>
                  <button onClick={() => removeToast(t.id)} className="ml-1 opacity-60 hover:opacity-100 transition-colors">&times;</button>
                </div>
              );
            })}
          </div>
        </ToastContext.Provider>
      );
    }

    export function useToast() {
      const ctx = useContext(ToastContext);
      if (!ctx) throw new Error('useToast must be used within ToastProvider');
      return ctx;
    }