35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import { useMapStore } from '../stores/mapStore'
|
|
|
|
const TYPE_STYLES = {
|
|
info: 'border-gruvbox-blue text-gruvbox-blue',
|
|
success: 'border-gruvbox-green text-gruvbox-green',
|
|
error: 'border-gruvbox-red text-gruvbox-red',
|
|
warning: 'border-gruvbox-yellow text-gruvbox-yellow',
|
|
}
|
|
|
|
export default function ToastContainer() {
|
|
const toasts = useMapStore((s) => s.toasts)
|
|
const removeToast = useMapStore((s) => s.removeToast)
|
|
|
|
if (toasts.length === 0) return null
|
|
|
|
return (
|
|
<div className="fixed top-14 right-4 z-50 flex flex-col gap-2 max-w-sm">
|
|
{toasts.map((toast) => (
|
|
<div
|
|
key={toast.id}
|
|
className={`px-4 py-2 bg-gruvbox-bg1 border-l-4 rounded shadow-lg text-sm flex items-start gap-2 ${TYPE_STYLES[toast.type]}`}
|
|
>
|
|
<span className="flex-1 text-gruvbox-fg">{toast.message}</span>
|
|
<button
|
|
onClick={() => removeToast(toast.id)}
|
|
className="text-gruvbox-fg4 hover:text-gruvbox-fg text-xs"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|