86 lines
2.0 KiB
TypeScript
86 lines
2.0 KiB
TypeScript
/**
|
||
* Toast notification component
|
||
* Displays temporary success/error/info messages
|
||
*/
|
||
|
||
import { useEffect } from 'react';
|
||
|
||
export type ToastType = 'success' | 'error' | 'info' | 'warning';
|
||
|
||
export interface ToastMessage {
|
||
id: string;
|
||
message: string;
|
||
type: ToastType;
|
||
duration?: number;
|
||
}
|
||
|
||
interface ToastProps {
|
||
message: ToastMessage;
|
||
onClose: (id: string) => void;
|
||
}
|
||
|
||
/**
|
||
* Single toast notification
|
||
*/
|
||
export function Toast({ message, onClose }: ToastProps) {
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => {
|
||
onClose(message.id);
|
||
}, message.duration || 5000);
|
||
|
||
return () => clearTimeout(timer);
|
||
}, [message.id, message.duration, onClose]);
|
||
|
||
const bgColor = {
|
||
success: 'bg-green-600',
|
||
error: 'bg-red-600',
|
||
info: 'bg-blue-600',
|
||
warning: 'bg-yellow-600',
|
||
}[message.type];
|
||
|
||
const icon = {
|
||
success: '✓',
|
||
error: '✕',
|
||
info: 'ℹ',
|
||
warning: '⚠',
|
||
}[message.type];
|
||
|
||
return (
|
||
<div
|
||
className={`${bgColor} text-white px-6 py-4 rounded-lg shadow-lg flex items-center justify-between gap-4 min-w-[300px] max-w-[500px] animate-slide-in`}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-xl font-bold">{icon}</span>
|
||
<span className="font-medium">{message.message}</span>
|
||
</div>
|
||
<button
|
||
onClick={() => onClose(message.id)}
|
||
className="text-white hover:text-gray-200 text-xl font-bold leading-none"
|
||
aria-label="Close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Toast container that displays all active toasts
|
||
*/
|
||
interface ToastContainerProps {
|
||
messages: ToastMessage[];
|
||
onClose: (id: string) => void;
|
||
}
|
||
|
||
export function ToastContainer({ messages, onClose }: ToastContainerProps) {
|
||
if (messages.length === 0) return null;
|
||
|
||
return (
|
||
<div className="fixed top-4 right-4 z-50 flex flex-col gap-2">
|
||
{messages.map((message) => (
|
||
<Toast key={message.id} message={message} onClose={onClose} />
|
||
))}
|
||
</div>
|
||
);
|
||
}
|