60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { X } from 'lucide-react'
|
|
import { useEffect } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { cn } from '@/shared/lib/cn'
|
|
import { useToastContext } from './toast-store'
|
|
|
|
export function Toaster() {
|
|
const { toasts, dismiss } = useToastContext()
|
|
|
|
return (
|
|
<div className="pointer-events-none fixed bottom-4 right-4 z-[10000] flex flex-col gap-2">
|
|
{toasts.map((t) => (
|
|
<ToastItem key={t.id} id={t.id} message={t.message} variant={t.variant} onDismiss={dismiss} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ToastItem({
|
|
id,
|
|
message,
|
|
variant,
|
|
onDismiss,
|
|
}: {
|
|
id: number
|
|
message: string
|
|
variant: 'default' | 'success' | 'error'
|
|
onDismiss: (id: number) => void
|
|
}) {
|
|
const { t } = useTranslation()
|
|
|
|
useEffect(() => {
|
|
const timeout = setTimeout(() => onDismiss(id), 4000)
|
|
return () => clearTimeout(timeout)
|
|
}, [id, onDismiss])
|
|
|
|
// Живой регион остаётся обычным контейнером, а закрытие висит на настоящей кнопке: обработчик
|
|
// клика на самом сообщении недоступен с клавиатуры, и скринридер о нём никак не сообщает.
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'crt-panel pointer-events-auto flex items-start gap-3 rounded-md px-4 py-3 text-sm shadow-lg',
|
|
variant === 'success' && 'border-primary/60',
|
|
variant === 'error' && 'border-red-700/60 text-red-400',
|
|
)}
|
|
role="status"
|
|
>
|
|
<span className="flex-1">{message}</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => onDismiss(id)}
|
|
aria-label={t('common.close')}
|
|
className="shrink-0 opacity-60 hover:opacity-100"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|