File size: 2,102 Bytes
7f6dd09 | 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 | 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>
);
}
|