31 lines
743 B
JavaScript
31 lines
743 B
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import './Toast.css'
|
|
|
|
function Toast({ message, onClose, duration = 3000, type = 'success' }) {
|
|
const [isVisible, setIsVisible] = useState(true)
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setIsVisible(false)
|
|
setTimeout(() => {
|
|
onClose?.()
|
|
}, 300) // Ждем завершения анимации
|
|
}, duration)
|
|
|
|
return () => clearTimeout(timer)
|
|
}, [duration, onClose])
|
|
|
|
if (!isVisible) return null
|
|
|
|
return (
|
|
<div className={`toast toast-${type} ${isVisible ? 'toast-visible' : ''}`}>
|
|
<div className="toast-content">
|
|
<span className="toast-message">{message}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Toast
|
|
|