src/components/Toast.jsx

import { useState, useEffect, useCallback } from 'react';

let _showToast = null;
export function showToast(msg, type = 'warn') {
  if (_showToast) _showToast(msg, type);
}
export function showInfoToast(msg) { showToast(msg, 'ok'); }
export function showWarnToast(msg) { showToast(msg, 'warn'); }

export default function Toast() {
  const [toast, setToast] = useState(null);

  useEffect(() => {
    _showToast = (msg, type) => {
      setToast({ msg, type });
      setTimeout(() => setToast(null), 3000);
    };
    return () => { _showToast = null; };
  }, []);

  if (!toast) return null;
  return (
    <div className={`toast toast-${toast.type}`}>
      {toast.type === 'warn' ? '⚠ ' : '✓ '}{toast.msg}
    </div>
  );
}