43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
'use client';
|
||
|
||
import { useToastStore } from '@/stores/toast-store';
|
||
|
||
export function ToastHost() {
|
||
const toasts = useToastStore((s) => s.toasts);
|
||
const dismiss = useToastStore((s) => s.dismiss);
|
||
|
||
if (!toasts.length) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div
|
||
className="pointer-events-none fixed bottom-4 right-4 z-[200] flex max-w-sm flex-col gap-2"
|
||
aria-live="polite"
|
||
>
|
||
{toasts.map((t) => (
|
||
<div
|
||
key={t.id}
|
||
className={`pointer-events-auto rounded-lg border px-3 py-2 text-sm shadow-lg ${
|
||
t.variant === 'error'
|
||
? 'border-red-200 bg-red-50 text-red-900'
|
||
: 'border-neutral-200 bg-white text-neutral-800'
|
||
}`}
|
||
>
|
||
<div className="flex items-start justify-between gap-2">
|
||
<span className="min-w-0 flex-1">{t.message}</span>
|
||
<button
|
||
type="button"
|
||
className="shrink-0 text-neutral-400 hover:text-neutral-700"
|
||
onClick={() => dismiss(t.id)}
|
||
aria-label="关闭"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|