phx-react
Version:
PHX REACT
34 lines • 3.28 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = require("@headlessui/react");
const solid_1 = require("@heroicons/react/24/solid");
const react_2 = tslib_1.__importStar(require("react"));
function Notification(props) {
const { show, title, description, handleClose, type = 'success', autoHideTimeout, setShow } = props;
(0, react_2.useEffect)(() => {
if (show) {
const timeoutId = setTimeout(() => {
setShow(false);
}, autoHideTimeout);
return () => clearTimeout(timeoutId);
}
return undefined;
}, [show]);
return (react_2.default.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_2.default.createElement("div", { className: 'flex w-full flex-col items-center space-y-4 sm:items-end' },
react_2.default.createElement(react_1.Transition, { show: show, as: react_2.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_2.default.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_2.default.createElement("div", { className: 'p-4' },
react_2.default.createElement("div", { className: 'flex items-start' },
react_2.default.createElement("div", { className: 'flex-shrink-0' }, type === 'success' ? (react_2.default.createElement(solid_1.CheckCircleIcon, { className: 'h-6 w-6 text-green-400', "aria-hidden": 'true' })) : type === 'error' ? (react_2.default.createElement(solid_1.ExclamationCircleIcon, { className: 'h-6 w-6 text-red-400', "aria-hidden": 'true' })) : (react_2.default.createElement(solid_1.ExclamationCircleIcon, { className: 'h-6 w-6 text-blue-400', "aria-hidden": 'true' }))),
react_2.default.createElement("div", { className: 'ml-3 w-0 flex-1 pt-0.5' },
react_2.default.createElement("p", { className: 'text-sm font-medium text-gray-900' }, title),
react_2.default.createElement("p", { className: 'mt-1 text-sm text-gray-600' }, description)),
react_2.default.createElement("div", { className: 'ml-4 flex flex-shrink-0' },
react_2.default.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_2.default.createElement("span", { className: 'sr-only' }, "Close"),
react_2.default.createElement(solid_1.XMarkIcon, { className: 'h-5 w-5', "aria-hidden": 'true' }))))))))));
}
exports.default = Notification;
//# sourceMappingURL=notification.js.map