2 lines
3.6 KiB
JavaScript
2 lines
3.6 KiB
JavaScript
import{r as u,j as e}from"./chunk-UIGDSWPH-BhuNDbxn.js";import{C as a}from"./ComponentCard-C2b5w2__.js";import{A as r}from"./Alert-BeBw6uu9.js";import{P as x,B as i}from"./main-af3pcbZa.js";function k(){const[d,t]=u.useState([]),n=s=>{const o={success:"Success!",error:"Error Occurred",warning:"Warning",info:"Information"},l={success:"Operation completed successfully.",error:"Something went wrong. Please try again.",warning:"Please review this action carefully.",info:"Here's some useful information for you."},m={id:Date.now(),variant:s,title:o[s],message:l[s]};t(c=>[...c,m]),setTimeout(()=>{t(c=>c.filter(g=>g.id!==m.id))},5e3)},h=s=>{t(o=>o.filter(l=>l.id!==s))};return e.jsxs(e.Fragment,{children:[e.jsx(x,{title:"React.js Alerts Dashboard | TailAdmin - React.js Admin Dashboard Template",description:"This is React.js Alerts Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"}),e.jsxs("div",{className:"space-y-5 sm:space-y-6",children:[e.jsxs(a,{title:"Interactive Notifications",desc:"Click buttons to add notifications",children:[e.jsxs("div",{className:"flex flex-wrap gap-3 mb-4",children:[e.jsx(i,{onClick:()=>n("success"),variant:"primary",children:"Add Success"}),e.jsx(i,{onClick:()=>n("error"),variant:"primary",children:"Add Error"}),e.jsx(i,{onClick:()=>n("warning"),variant:"primary",children:"Add Warning"}),e.jsx(i,{onClick:()=>n("info"),variant:"primary",children:"Add Info"}),d.length>0&&e.jsx(i,{onClick:()=>t([]),variant:"outline",children:"Clear All"})]}),e.jsx("div",{className:"fixed top-4 right-4 z-50 space-y-2 max-w-md w-full pointer-events-none",children:d.map(s=>e.jsx("div",{className:"pointer-events-auto animate-in slide-in-from-top duration-300",children:e.jsxs("div",{className:"relative",children:[e.jsx(r,{variant:s.variant,title:s.title,message:s.message,showLink:!1}),e.jsx("button",{onClick:()=>h(s.id),className:"absolute top-2 right-2 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",children:e.jsx("svg",{className:"w-4 h-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})})]})},s.id))})]}),e.jsx(a,{title:"Success Alert",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(r,{variant:"success",title:"Success Message",message:"Operation completed successfully.",showLink:!0,linkHref:"/",linkText:"Learn more"}),e.jsx(r,{variant:"success",title:"Success Message",message:"Your changes have been saved.",showLink:!1})]})}),e.jsx(a,{title:"Warning Alert",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(r,{variant:"warning",title:"Warning Message",message:"Be cautious when performing this action.",showLink:!0,linkHref:"/",linkText:"Learn more"}),e.jsx(r,{variant:"warning",title:"Warning Message",message:"This action cannot be undone.",showLink:!1})]})}),e.jsx(a,{title:"Error Alert",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(r,{variant:"error",title:"Error Message",message:"Something went wrong. Please try again.",showLink:!0,linkHref:"/",linkText:"Learn more"}),e.jsx(r,{variant:"error",title:"Error Message",message:"Failed to save changes. Please check your connection.",showLink:!1})]})}),e.jsx(a,{title:"Info Alert",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(r,{variant:"info",title:"Info Message",message:"Here's some useful information for you.",showLink:!0,linkHref:"/",linkText:"Learn more"}),e.jsx(r,{variant:"info",title:"Info Message",message:"New features are available. Check them out!",showLink:!1})]})})]})]})}export{k as default};
|