spb/zyquo-cloud-web Public MIT

1/*2 *  Toasts.tsx3 *  Zyquo Cloud Web4 *5 *  Author: Simon-Pierre Boucher6 *  Mail: contact@spboucher.ai7 *8 *  Toast stack: graceful human errors, success confirmations, and undo for9 *  soft deletes.10 */1112import { useStore } from '../state/store'13import { IconX } from './icons'1415export default function Toasts() {16  const toasts = useStore((s) => s.toasts)17  const dismissToast = useStore((s) => s.dismissToast)18  if (toasts.length === 0) return null19  return (20    <div className="toasts">21      {toasts.map((toast) => (22        <div key={toast.id} className={`toast ${toast.kind}`}>23          <span style={{ flex: 1 }}>{toast.text}</span>24          {toast.undo && (25            <button26              className="undo"27              onClick={() => {28                toast.undo?.()29                dismissToast(toast.id)30              }}31            >32              Undo33            </button>34          )}35          <button className="icon-button" onClick={() => dismissToast(toast.id)}>36            <IconX size={9} />37          </button>38        </div>39      ))}40    </div>41  )42}43