44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from 'react';
|
|
|
|
interface ToastProps {
|
|
message: string;
|
|
type: 'success' | 'error' | 'warning' | 'info';
|
|
onClose: () => void;
|
|
duration?: number;
|
|
}
|
|
|
|
export default function Toast({ message, type, onClose, duration = 3000 }: ToastProps) {
|
|
useEffect(() => {
|
|
const timer = setTimeout(onClose, duration);
|
|
return () => clearTimeout(timer);
|
|
}, [duration, onClose]);
|
|
|
|
const styles = {
|
|
success: 'bg-green-500 text-white',
|
|
error: 'bg-red-500 text-white',
|
|
warning: 'bg-yellow-500 text-white',
|
|
info: 'bg-blue-500 text-white',
|
|
};
|
|
|
|
const icons = {
|
|
success: 'ri-checkbox-circle-line',
|
|
error: 'ri-error-warning-line',
|
|
warning: 'ri-alert-line',
|
|
info: 'ri-information-line',
|
|
};
|
|
|
|
return (
|
|
<div className="fixed top-4 right-4 z-50 animate-in slide-in-from-top-5 fade-in duration-300">
|
|
<div className={`${styles[type]} rounded-xl shadow-lg px-6 py-4 flex items-center gap-3 min-w-[300px] max-w-md`}>
|
|
<i className={`${icons[type]} text-2xl`}></i>
|
|
<p className="flex-1 font-medium">{message}</p>
|
|
<button onClick={onClose} className="hover:opacity-70 transition-opacity">
|
|
<i className="ri-close-line text-xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|