You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
2.3 KiB
65 lines
2.3 KiB
import {
|
|
CheckCircleIcon,
|
|
ExclamationCircleIcon,
|
|
ExclamationIcon,
|
|
InformationCircleIcon,
|
|
} from '@heroicons/react/outline';
|
|
import { XIcon } from '@heroicons/react/solid';
|
|
import type { ToastProps } from 'react-toast-notifications';
|
|
import Transition from '../Transition';
|
|
|
|
const Toast = ({
|
|
appearance,
|
|
children,
|
|
onDismiss,
|
|
transitionState,
|
|
}: ToastProps) => {
|
|
return (
|
|
<div className="toast pointer-events-none flex max-w-full items-end justify-center px-2 py-2 sm:items-start sm:justify-end">
|
|
<Transition
|
|
show={transitionState === 'entered'}
|
|
enter="transition duration-300 transform-gpu"
|
|
enterFrom="opacity-0 scale-95"
|
|
enterTo="opacity-100 scale-100"
|
|
leave="transition duration-150 transform-gpu"
|
|
leaveFrom="opacity-100 scale-100"
|
|
leaveTo="opacity-0 scale-90"
|
|
>
|
|
<div className="pointer-events-auto w-full max-w-sm rounded-lg bg-gray-800 shadow-lg ring-1 ring-gray-500">
|
|
<div className="overflow-hidden rounded-lg ring-1 ring-black ring-opacity-5">
|
|
<div className="p-4">
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0">
|
|
{appearance === 'success' && (
|
|
<CheckCircleIcon className="h-6 w-6 text-green-400" />
|
|
)}
|
|
{appearance === 'error' && (
|
|
<ExclamationCircleIcon className="h-6 w-6 text-red-500" />
|
|
)}
|
|
{appearance === 'info' && (
|
|
<InformationCircleIcon className="h-6 w-6 text-indigo-500" />
|
|
)}
|
|
{appearance === 'warning' && (
|
|
<ExclamationIcon className="h-6 w-6 text-orange-400" />
|
|
)}
|
|
</div>
|
|
<div className="ml-3 w-0 flex-1 text-white">{children}</div>
|
|
<div className="ml-4 flex flex-shrink-0">
|
|
<button
|
|
onClick={() => onDismiss()}
|
|
className="inline-flex text-gray-400 transition duration-150 ease-in-out focus:text-gray-500 focus:outline-none"
|
|
>
|
|
<XIcon className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Toast;
|