62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import toast from 'react-hot-toast'
|
|
import { ToastProps } from '@/app/types'
|
|
|
|
const toastStyles = {
|
|
success: {
|
|
background: 'bg-green-50',
|
|
text: 'text-green-800',
|
|
border: 'border-green-200',
|
|
},
|
|
error: {
|
|
background: 'bg-red-50',
|
|
text: 'text-red-800',
|
|
border: 'border-red-200',
|
|
},
|
|
loading: {
|
|
background: 'bg-blue-50',
|
|
text: 'text-blue-800',
|
|
border: 'border-blue-200',
|
|
},
|
|
}
|
|
|
|
const showToast = ({ type, message, action, duration }: ToastProps) => {
|
|
const styles = toastStyles[type]
|
|
|
|
toast.custom(
|
|
(t) => (
|
|
<div
|
|
className={`${
|
|
t.visible ? 'animate-slideIn' : 'animate-slideOut'
|
|
} shadow-lg rounded-2xl px-3 pointer-events-auto ${
|
|
styles.background
|
|
} ${
|
|
styles.border
|
|
} border transform transition-all duration-300 ease-in-out`}
|
|
>
|
|
<div className="p-4">
|
|
<div className="flex items-start">
|
|
<div className="flex-1">
|
|
<p className={`text-sm font-medium ${styles.text}`}>{message}</p>
|
|
{action && (
|
|
<div className="text-center">
|
|
<button
|
|
onClick={action.onClick}
|
|
className="mt-2 text-sm text-red-600 hover:text-red-800 font-medium"
|
|
>
|
|
{action.text}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
{ duration: duration || 4000 }
|
|
)
|
|
}
|
|
|
|
export default showToast
|
|
|
|
//пример использования: showToast({ type: 'error', message: 'Неверный email или пароль' })
|