88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import { useCallback, useEffect, useState } from 'react';
|
|
import { InfoIcon, WarningIcon, ErrorIcon, CloseIcon } from '../icons';
|
|
|
|
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 rounded-lg border-l-4 p-4 shadow-lg transition-all duration-300';
|
|
|
|
const typeStyles = {
|
|
info: 'border-secondary-500 bg-secondary-100',
|
|
warning: 'border-yellow-500 bg-yellow-100',
|
|
error: 'border-red-500 bg-red-100',
|
|
};
|
|
|
|
const iconStyles = {
|
|
info: 'text-secondary-700',
|
|
warning: 'text-yellow-700',
|
|
error: 'text-red-700',
|
|
};
|
|
|
|
const textStyles = {
|
|
info: 'text-secondary-900',
|
|
warning: 'text-yellow-900',
|
|
error: 'text-red-900',
|
|
};
|
|
|
|
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 = useCallback(() => {
|
|
setIsAnimatingOut(true);
|
|
setTimeout(() => {
|
|
setIsVisible(false);
|
|
onClose?.(id);
|
|
}, 300);
|
|
}, [id, onClose]);
|
|
|
|
useEffect(() => {
|
|
if (duration > 0) {
|
|
const timer = setTimeout(handleClose, duration);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [duration, handleClose]);
|
|
|
|
if (!isVisible) {
|
|
return null;
|
|
}
|
|
|
|
const icons = {
|
|
info: <InfoIcon size={20} className={iconStyles[type]} />,
|
|
warning: <WarningIcon size={20} className={iconStyles[type]} />,
|
|
error: <ErrorIcon size={20} className={iconStyles[type]} />,
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`${baseStyles} ${typeStyles[type]} ${
|
|
isAnimatingOut ? 'translate-x-full opacity-0' : '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 transition-opacity hover:opacity-100 ${textStyles[type]}`}
|
|
aria-label="Close"
|
|
>
|
|
<CloseIcon size={18} />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|