Sven laptop
37 lines
1.5 KiB
React
37 lines
1.5 KiB
React
export function ToastContainer({ toasts }) {
|
|
if (!toasts.length) return null;
|
|
|
|
return (
|
|
<div className="toast-container" role="status" aria-live="polite">
|
|
{toasts.map((toast) => (
|
|
<div
|
|
key={toast.id}
|
|
className={`toast ${toast.leaving ? "leaving" : ""} toast-${toast.type}`}
|
|
role="alert"
|
|
>
|
|
<span className="toast-icon">
|
|
{toast.type === "success" ? (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="20 6 9 17 4 12" />
|
|
</svg>
|
|
) : toast.type === "error" ? (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<line x1="15" y1="9" x2="9" y2="15" />
|
|
<line x1="9" y1="9" x2="15" y2="15" />
|
|
</svg>
|
|
) : (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<line x1="12" y1="16" x2="12" y2="12" />
|
|
<line x1="12" y1="8" x2="12.01" y2="8" />
|
|
</svg>
|
|
)}
|
|
</span>
|
|
{toast.message}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|