f795ff2b47
Some checks failed
CI Docker Mining Proof / Linux agent hashrate proof (push) Has been cancelled
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { useToast } from '../../context/ToastContext';
|
||
import type { ToastLevel } from '../../context/ToastContext';
|
||
import './ToastStack.css';
|
||
|
||
const LEVEL_LABEL: Record<ToastLevel, string> = {
|
||
info: 'INFO',
|
||
success: 'OK',
|
||
warn: 'WARN',
|
||
error: 'ERROR',
|
||
};
|
||
|
||
export default function ToastStack() {
|
||
const { toasts, dismissToast, clearAllToasts } = useToast();
|
||
|
||
if (toasts.length === 0) return null;
|
||
|
||
return (
|
||
<div className="toast-stack" role="region" aria-label="Notifications" data-testid="toast-stack">
|
||
{toasts.length > 1 && (
|
||
<button
|
||
type="button"
|
||
className="toast-clear-all"
|
||
onClick={clearAllToasts}
|
||
aria-label="Clear all notifications"
|
||
>
|
||
Clear all
|
||
</button>
|
||
)}
|
||
<ul className="toast-list">
|
||
{toasts.map((toast) => (
|
||
<li key={toast.id} className={`toast-item toast-${toast.level}`} role="status">
|
||
<div className="toast-body">
|
||
<span className="toast-level font-tech">{LEVEL_LABEL[toast.level]}</span>
|
||
<div className="toast-text">
|
||
<span className="toast-message">{toast.message}</span>
|
||
{toast.detail ? <span className="toast-detail">{toast.detail}</span> : null}
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="toast-dismiss"
|
||
onClick={() => dismissToast(toast.id)}
|
||
aria-label="Dismiss notification"
|
||
>
|
||
×
|
||
</button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
);
|
||
}
|