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>
|
||
)
|
||
}
|