phx-react
Version:
PHX REACT
31 lines • 3.14 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) {
var show = props.show, title = props.title, description = props.description, handleClose = props.handleClose, _a = props.type, type = _a === void 0 ? 'success' : _a, autoHideTimeout = props.autoHideTimeout, setShow = props.setShow;
useEffect(function () {
if (show) {
var timeoutId_1 = setTimeout(function () {
setShow(false);
}, autoHideTimeout);
return function () { return clearTimeout(timeoutId_1); };
}
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-500' }, 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