All files / src/components/notifications ToastContainer.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { AnimatePresence } from "motion/react";
import type { JSX } from "react";
import type { ToastItem } from "../../context/ToastContext.js";
import { Toast } from "./Toast.js";
import styles from "./ToastContainer.module.scss";
 
/** Props for the ToastContainer component. */
export interface ToastContainerProps {
  /** Active toast notifications to render. */
  toasts: ToastItem[];
  /** Callback to dismiss a toast by id. */
  onDismiss: (id: string) => void;
}
 
/**
 * Fixed overlay that renders all active toasts at the top-center of the viewport.
 * Mount this once alongside your main app layout and pass toasts from context.
 */
export function ToastContainer({ toasts, onDismiss }: ToastContainerProps): JSX.Element {
  return (
    <div className={styles.container} data-testid="toast-container">
      <AnimatePresence>
        {toasts.map((toast) => (
          <Toast key={toast.id} toast={toast} onDismiss={onDismiss} />
        ))}
      </AnimatePresence>
    </div>
  );
}