phx-react
Version:
PHX REACT
31 lines • 2.97 kB
JavaScript
import { Transition } from '@headlessui/react';
import { CheckCircleIcon, ExclamationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
import React, { Fragment, useEffect } from 'react';
function Notification(props) {
const { show, title, description, handleClose, type = 'success', autoHideTimeout, setShow } = props;
useEffect(() => {
if (show) {
const timeoutId = setTimeout(() => {
setShow(false);
}, autoHideTimeout);
return () => clearTimeout(timeoutId);
}
return undefined;
}, [show]);
return (React.createElement("div", { "aria-live": 'assertive', className: 'pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6' },
React.createElement("div", { className: 'flex w-full flex-col items-center space-y-4 sm:items-end' },
React.createElement(Transition, { show: show, as: Fragment, enter: 'transform ease-out duration-300 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2', enterTo: 'translate-y-0 opacity-100 sm:translate-x-0', leave: 'transition ease-in duration-100', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
React.createElement("div", { className: 'pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5' },
React.createElement("div", { className: 'p-4' },
React.createElement("div", { className: 'flex items-start' },
React.createElement("div", { className: 'flex-shrink-0' }, type === 'success' ? (React.createElement(CheckCircleIcon, { className: 'h-6 w-6 text-green-400', "aria-hidden": 'true' })) : type === 'error' ? (React.createElement(ExclamationCircleIcon, { className: 'h-6 w-6 text-red-400', "aria-hidden": 'true' })) : (React.createElement(ExclamationCircleIcon, { className: 'h-6 w-6 text-blue-400', "aria-hidden": 'true' }))),
React.createElement("div", { className: 'ml-3 w-0 flex-1 pt-0.5' },
React.createElement("p", { className: 'text-sm font-medium text-gray-900' }, title),
React.createElement("p", { className: 'mt-1 text-sm text-gray-600' }, description)),
React.createElement("div", { className: 'ml-4 flex flex-shrink-0' },
React.createElement("button", { type: 'button', className: 'inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2', onClick: handleClose },
React.createElement("span", { className: 'sr-only' }, "Close"),
React.createElement(XMarkIcon, { className: 'h-5 w-5', "aria-hidden": 'true' }))))))))));
}
export default Notification;
//# sourceMappingURL=notification.js.map