phx-react
Version:
PHX REACT
34 lines • 3.45 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = require("@headlessui/react");
var solid_1 = require("@heroicons/react/24/solid");
var react_2 = tslib_1.__importStar(require("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;
(0, react_2.useEffect)(function () {
if (show) {
var timeoutId_1 = setTimeout(function () {
setShow(false);
}, autoHideTimeout);
return function () { return clearTimeout(timeoutId_1); };
}
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-500' }, 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