74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { Notification } from './NotificationProvider';
|
||
|
|
|
||
|
|
interface NotificationToastProps {
|
||
|
|
notification: Notification;
|
||
|
|
onClose: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function NotificationToast({ notification, onClose }: NotificationToastProps) {
|
||
|
|
const getIcon = () => {
|
||
|
|
switch (notification.type) {
|
||
|
|
case 'success':
|
||
|
|
return (
|
||
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
case 'error':
|
||
|
|
return (
|
||
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
case 'warning':
|
||
|
|
return (
|
||
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
default:
|
||
|
|
return (
|
||
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const getStyles = () => {
|
||
|
|
switch (notification.type) {
|
||
|
|
case 'success':
|
||
|
|
return 'bg-green-50 border-green-200 text-green-800';
|
||
|
|
case 'error':
|
||
|
|
return 'bg-red-50 border-red-200 text-red-800';
|
||
|
|
case 'warning':
|
||
|
|
return 'bg-yellow-50 border-yellow-200 text-yellow-800';
|
||
|
|
default:
|
||
|
|
return 'bg-blue-50 border-blue-200 text-blue-800';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`${getStyles()} border rounded-lg shadow-lg p-4 flex items-start gap-3 animate-slideInRight min-w-[300px]`}
|
||
|
|
role="alert"
|
||
|
|
>
|
||
|
|
<div className="flex-shrink-0 mt-0.5">{getIcon()}</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<p className="text-sm font-medium">{notification.message}</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors"
|
||
|
|
aria-label="Fermer"
|
||
|
|
>
|
||
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|