/**
* Компонент всплывающих уведомлений (Toast)
*/
'use client';
import React, { useEffect, useState } from 'react';
export interface ToastMessage {
id: string;
message: string;
type?: 'success' | 'error' | 'info';
}
interface ToastProps {
messages: ToastMessage[];
onRemove: (id: string) => void;
}
export function Toast({ messages, onRemove }: ToastProps) {
return (
{messages.map((msg) => (
))}
);
}
function ToastItem({ message, onRemove }: { message: ToastMessage; onRemove: (id: string) => void }) {
const [visible, setVisible] = useState(false);
useEffect(() => {
const timer = setTimeout(() => setVisible(true), 10);
const removeTimer = setTimeout(() => {
setVisible(false);
setTimeout(() => onRemove(message.id), 300);
}, 3000);
return () => {
clearTimeout(timer);
clearTimeout(removeTimer);
};
}, [message.id, onRemove]);
const getBgColor = () => {
switch (message.type) {
case 'success': return 'var(--md-sys-color-tertiary-container, #e8def8)';
case 'error': return 'var(--md-sys-color-error-container, #f9dedc)';
default: return 'var(--md-sys-color-secondary-container, #e8def8)';
}
};
const getTextColor = () => {
switch (message.type) {
case 'success': return 'var(--md-sys-color-on-tertiary-container, #1d192b)';
case 'error': return 'var(--md-sys-color-on-error-container, #410002)';
default: return 'var(--md-sys-color-on-secondary-container, #1d192b)';
}
};
return (
{message.type === 'success' && check_circle}
{message.type === 'error' && error}
{message.type === 'info' && info}
{message.message}
);
}