50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { X, CheckCircle, AlertCircle, Info } from 'lucide-react';
|
|
|
|
export type SnackbarType = 'success' | 'error' | 'info';
|
|
|
|
interface SnackbarProps {
|
|
message: string;
|
|
type?: SnackbarType;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
duration?: number;
|
|
}
|
|
|
|
const Snackbar: React.FC<SnackbarProps> = ({ message, type = 'info', isOpen, onClose, duration = 3000 }) => {
|
|
useEffect(() => {
|
|
if (isOpen && duration > 0) {
|
|
const timer = setTimeout(() => {
|
|
onClose();
|
|
}, duration);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [isOpen, duration, onClose]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const bgColors = {
|
|
success: 'bg-primary-container text-on-primary-container',
|
|
error: 'bg-error-container text-on-error-container',
|
|
info: 'bg-secondary-container text-on-secondary-container'
|
|
};
|
|
|
|
const icons = {
|
|
success: <CheckCircle size={20} />,
|
|
error: <AlertCircle size={20} />,
|
|
info: <Info size={20} />
|
|
};
|
|
|
|
return (
|
|
<div className={`fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 flex items-center gap-3 px-4 py-3 rounded-lg shadow-elevation-3 ${bgColors[type]} min-w-[300px] animate-in fade-in slide-in-from-bottom-4 duration-300`}>
|
|
<div className="shrink-0">{icons[type]}</div>
|
|
<p className="flex-1 text-sm font-medium">{message}</p>
|
|
<button onClick={onClose} className="p-1 hover:bg-black/10 rounded-full transition-colors">
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Snackbar;
|