91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Info, AlertTriangle, XCircle, X } from 'lucide-react';
|
|
|
|
export type ToastType = 'info' | 'warning' | 'error';
|
|
|
|
export interface ToastProps {
|
|
id: string;
|
|
type: ToastType;
|
|
message: string;
|
|
duration?: number;
|
|
onClose?: (id: string) => void;
|
|
}
|
|
|
|
const getToastStyles = (type: ToastType) => {
|
|
const baseStyles = 'flex items-center gap-3 p-4 rounded-lg shadow-lg border-l-4 transition-all duration-300';
|
|
|
|
const typeStyles = {
|
|
info: 'bg-blue-50 dark:bg-blue-900/30 border-blue-500 dark:border-blue-400',
|
|
warning: 'bg-yellow-50 dark:bg-yellow-900/30 border-yellow-500 dark:border-yellow-400',
|
|
error: 'bg-red-50 dark:bg-red-900/30 border-red-500 dark:border-red-400',
|
|
};
|
|
|
|
const iconStyles = {
|
|
info: 'text-blue-600 dark:text-blue-400',
|
|
warning: 'text-yellow-600 dark:text-yellow-400',
|
|
error: 'text-red-600 dark:text-red-400',
|
|
};
|
|
|
|
const textStyles = {
|
|
info: 'text-blue-800 dark:text-blue-200',
|
|
warning: 'text-yellow-800 dark:text-yellow-200',
|
|
error: 'text-red-800 dark:text-red-200',
|
|
};
|
|
|
|
return { baseStyles, typeStyles, iconStyles, textStyles };
|
|
};
|
|
|
|
export function Toast({ id, type, message, duration = 5000, onClose }: ToastProps) {
|
|
const [isVisible, setIsVisible] = useState(true);
|
|
const [isAnimatingOut, setIsAnimatingOut] = useState(false);
|
|
|
|
const { baseStyles, typeStyles, iconStyles, textStyles } = getToastStyles(type);
|
|
|
|
const handleClose = () => {
|
|
setIsAnimatingOut(true);
|
|
setTimeout(() => {
|
|
setIsVisible(false);
|
|
onClose?.(id);
|
|
}, 300);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (duration > 0) {
|
|
const timer = setTimeout(handleClose, duration);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [duration]);
|
|
|
|
if (!isVisible) {
|
|
return null;
|
|
}
|
|
|
|
const icons = {
|
|
info: <Info size={20} className={iconStyles[type]} />,
|
|
warning: <AlertTriangle size={20} className={iconStyles[type]} />,
|
|
error: <XCircle size={20} className={iconStyles[type]} />,
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`${baseStyles} ${typeStyles[type]} ${
|
|
isAnimatingOut
|
|
? 'opacity-0 translate-x-full'
|
|
: 'animate-slideInRight opacity-100'
|
|
}`}
|
|
>
|
|
{icons[type]}
|
|
<p className={`flex-1 text-sm font-medium ${textStyles[type]}`}>
|
|
{message}
|
|
</p>
|
|
<button
|
|
onClick={handleClose}
|
|
className={`ml-2 opacity-70 hover:opacity-100 transition-opacity ${textStyles[type]}`}
|
|
aria-label="Close"
|
|
>
|
|
<X size={18} />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|