react-notification-npm/dist/index.mjs

react notification library

import{jsx as t,Fragment as e,jsxs as i}from"react/jsx-runtime";import{useState as o,useCallback as n,useMemo as r}from"react";import{colord as a}from"colord";import{AiOutlineCheckCircle as s,AiOutlineInfoCircle as c,AiOutlineWarning as d,AiOutlineCloseCircle as l,AiOutlineClose as p}from"react-icons/ai";var f="notification-module_notification__4oN1U",m="notification-module_notification-open__50xIb",x="notification-module_notification-text__FdOrX";!function(t,e){void 0===e&&(e={});var i=e.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}}(".notification-module_toast-container__UdtqQ{display:flex;flex-direction:column-reverse;gap:10px;position:fixed;right:20px;top:20px;z-index:1000}.notification-module_notification__4oN1U{align-items:center;animation:notification-module_JumpIn__RkZbv .6s ease-in;border:1px solid;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);display:flex;font-family:sans-serif;gap:10px;justify-content:space-between;max-width:350px;min-width:200px;opacity:1;padding:10px;position:fixed;right:20px;z-index:1000}.notification-module_notification-open__50xIb{opacity:1}.notification-module_notification-text__FdOrX{align-items:center;display:flex;gap:4px}@keyframes notification-module_JumpIn__RkZbv{0%{transform:translateX(100%)}to{transform:translateX(0)}}");const u={warn:"#FEEC37",success:"#C2FFC7",error:"#FF748B",info:"#C4D9FF"},_={success:t(s,{}),info:t(c,{}),warn:t(d,{}),error:t(l,{})},y=(s=3e3)=>{const[c,d]=o([]);return{trigger:n(((t,e="success")=>{const i=Date.now();d((o=>[...o,{id:i,text:t,type:e}])),setTimeout((()=>{d((t=>t.filter((t=>t.id!==i))))}),s+500)}),[s]),Toasts:r((()=>0===c.length?null:t(e,{children:c.map((({id:e,text:o,type:n="success"},r)=>{const s=u[n];return i("section",{role:"alert",className:`${f} ${m}`,style:{top:20+50*r,backgroundColor:s,borderColor:a(s).darken(.1).toHex()},children:[i("div",{className:x,children:[_[n],o]}),t(p,{onClick:()=>d((t=>t.filter((t=>t.id!==e)))),fill:"currentColor",style:{cursor:"pointer"}})]},e)}))})),[c])}};export{y as default};
//# sourceMappingURL=index.mjs.map