33 lines
802 B
TypeScript
33 lines
802 B
TypeScript
|
import { useToastStore } from '../stores/toast'
|
|||
|
|
import type { ToastType } from '../stores/toast'
|
|||
|
|
import styles from './Toast.module.css'
|
|||
|
|
|
|||
|
|
const TYPE_CLASS: Record<ToastType, string> = {
|
|||
|
|
success: styles.toastSuccess,
|
|||
|
|
error: styles.toastError,
|
|||
|
|
info: styles.toastInfo,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function ToastContainer() {
|
|||
|
|
const { toasts, removeToast } = useToastStore()
|
|||
|
|
|
|||
|
|
if (toasts.length === 0) return null
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className={styles.container}>
|
|||
|
|
{toasts.map((t) => (
|
|||
|
|
<div key={t.id} className={TYPE_CLASS[t.type]}>
|
|||
|
|
<span>{t.message}</span>
|
|||
|
|
<button
|
|||
|
|
className={styles.closeBtn}
|
|||
|
|
onClick={() => removeToast(t.id)}
|
|||
|
|
aria-label="关闭"
|
|||
|
|
>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|