Toast.tsx•1.47 kB
import { useEffect } from 'react';
interface ToastProps {
message: string;
type?: 'error' | 'success' | 'info';
onClose: () => void;
duration?: number;
}
export default function Toast({ message, type = 'error', onClose, duration = 5000 }: ToastProps) {
useEffect(() => {
const timer = setTimeout(() => {
onClose();
}, duration);
return () => clearTimeout(timer);
}, [duration, onClose]);
const bgColor = type === 'error' ? 'bg-red-600' : type === 'success' ? 'bg-green-600' : 'bg-blue-600';
return (
<div className="fixed bottom-4 right-4 z-50 animate-in slide-in-from-right">
<div className={`${bgColor} text-white px-6 py-4 rounded-lg shadow-lg max-w-md flex items-start gap-3`}>
<div className="flex-1">
<p className="text-sm font-medium">{message}</p>
</div>
<button
onClick={onClose}
className="text-white hover:text-gray-200 transition-colors"
aria-label="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</div>
</div>
);
}