| function toastStyle(type) { |
| const base = { |
| borderRadius: "var(--radius-md)", |
| padding: "12px 16px", |
| boxShadow: "var(--shadow-lg)", |
| minWidth: "260px", |
| maxWidth: "380px", |
| display: "flex", |
| alignItems: "center", |
| justifyContent: "space-between", |
| gap: "16px", |
| pointerEvents: "auto", |
| fontSize: "13px", |
| fontFamily: "var(--font-body)", |
| lineHeight: 1.4, |
| }; |
| if (type === "error") return { ...base, background: "rgba(239,68,68,0.9)", color: "#fff", border: "1px solid var(--danger)" }; |
| if (type === "success") return { ...base, background: "rgba(34,197,94,0.9)", color: "#fff", border: "1px solid var(--success)" }; |
| if (type === "warn") return { ...base, background: "rgba(234,179,8,0.9)", color: "var(--bg-primary)", border: "1px solid var(--warning)" }; |
| return { ...base, background: "var(--bg-elevated)", color: "var(--text-primary)", border: "1px solid var(--border)" }; |
| } |
|
|
| export default function ToastContainer({ toasts, onClose }) { |
| if (!toasts || toasts.length === 0) return null; |
|
|
| return ( |
| <div |
| style={{ |
| position: "fixed", |
| bottom: "24px", |
| right: "24px", |
| zIndex: 50, |
| display: "flex", |
| flexDirection: "column", |
| gap: "8px", |
| pointerEvents: "none", |
| }} |
| > |
| {toasts.map((t) => ( |
| <div key={t.id} className="toast-enter" style={toastStyle(t.type)}> |
| <span>{t.message}</span> |
| <button |
| onClick={() => onClose(t.id)} |
| aria-label="Dismiss" |
| style={{ |
| background: "none", |
| border: "none", |
| color: "inherit", |
| opacity: 0.7, |
| cursor: "pointer", |
| fontSize: "16px", |
| lineHeight: 1, |
| flexShrink: 0, |
| transition: "opacity var(--transition-fast)", |
| }} |
| onMouseEnter={(e) => e.currentTarget.style.opacity = "1"} |
| onMouseLeave={(e) => e.currentTarget.style.opacity = "0.7"} |
| > |
| × |
| </button> |
| </div> |
| ))} |
| </div> |
| ); |
| } |
|
|
