https://www.anyangle.ai/assets/js/GlassNotificationDemo-CfAij5LQ.js

1import{j as e}from"./ui-vendor-vRbYWRwc.js";import{r as s}from"./react-vendor-D511M1J9.js";import{B as o,a as t,o as c,C as i,d as a,e as l,i as n,f as r}from"./main-C17z2jjy.js";import{k as h,b as d,S as m,c as x,T as u,I as f,Z as b}from"./utils-vendor-vsWCwOh-.js";import"./data-vendor-tgy-DeSy.js";function j(){const[j,g]=s.useState(0);return e.jsxs("div",{className:"min-h-screen bg-gradient-to-br from-ivory via-sand to-ivory p-8 relative overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0 opacity-30 pointer-events-none",children:[e.jsx("div",{className:"absolute top-20 left-20 w-64 h-64 bg-chocolate/5 rounded-full blur-3xl"}),e.jsx("div",{className:"absolute top-40 right-32 w-48 h-48 bg-chocolate/5 rounded-full blur-2xl"}),e.jsx("div",{className:"absolute bottom-32 left-1/3 w-32 h-32 bg-chocolate/5 rounded-full blur-xl"}),e.jsx("div",{className:"absolute bottom-20 right-20 w-40 h-40 bg-chocolate/5 rounded-full blur-2xl"})]}),e.jsxs("div",{className:"max-w-6xl mx-auto space-y-8 relative z-10",children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsxs("div",{className:"flex items-center justify-center gap-3",children:[e.jsx(h,{className:"w-10 h-10 text-chocolate"}),e.jsx("h1",{className:"text-4xl font-bold text-chocolate",children:"Glass Notification System"})]}),e.jsx("p",{className:"text-lg text-chocolate/70",children:"Unified, elegant notifications for AnyAngle.ai"}),e.jsxs(o,{variant:"outline",className:"text-chocolate border-chocolate/30",children:[j," notifications triggered"]}),e.jsxs(t,{onClick:()=>{c.success("Test!","This should work now!"),g(e=>e+1)},className:"bg-chocolate/10 hover:bg-chocolate/20 text-chocolate border-chocolate/30",children:[e.jsx(d,{className:"w-4 h-4 mr-2 text-chocolate/80"}),"🧪 Quick Test"]})]}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-6",children:[e.jsxs(i,{className:"bg-ivory border-2 border-chocolate/20",children:[e.jsxs(a,{children:[e.jsxs(l,{className:"flex items-center gap-2 text-chocolate",children:[e.jsx(m,{className:"w-5 h-5"}),"Basic Notifications"]}),e.jsx(n,{children:"Four notification types with auto-dismiss"})]}),e.jsxs(r,{className:"space-y-3",children:[e.jsxs(t,{onClick:()=>{c.success("Generation completed!","Your 3 angle images have been generated successfully."),g(e=>e+1)},className:"w-full bg-chocolate/10 hover:bg-chocolate/20 text-chocolate border-chocolate/30",children:[e.jsx(d,{className:"w-4 h-4 mr-2 text-chocolate/80"}),"Success Notification"]}),e.jsxs(t,{onClick:()=>{c.error("Generation failed","Failed to create generation. Please check your credits and try again."),g(e=>e+1)},className:"w-full bg-chocolate/8 hover:bg-chocolate/15 text-chocolate/80 border-chocolate/25",children:[e.jsx(x,{className:"w-4 h-4 mr-2 text-chocolate/80"}),"Error Notification"]}),e.jsxs(t,{onClick:()=>{c.warning("Low credits","You have only 5 credits remaining. Consider purchasing more to continue."),g(e=>e+1)},className:"w-full bg-chocolate/6 hover:bg-chocolate/12 text-chocolate/70 border-chocolate/20",children:[e.jsx(u,{className:"w-4 h-4 mr-2 text-chocolate/80"}),"Warning Notification"]}),e.jsxs(t,{onClick:()=>{c.info("New feature available","Check out our new quality control system for better results!"),g(e=>e+1)},className:"w-full bg-chocolate/4 hover:bg-chocolate/8 text-chocolate/60 border-chocolate/15",children:[e.jsx(f,{className:"w-4 h-4 mr-2 text-chocolate/80"}),"Info Notification"]})]})]}),e.jsxs(i,{className:"bg-ivory border-2 border-chocolate/20",children:[e.jsxs(a,{children:[e.jsxs(l,{className:"flex items-center gap-2 text-chocolate",children:[e.jsx(b,{className:"w-5 h-5"}),"Advanced Features"]}),e.jsx(n,{children:"Custom behaviors and interactions"})]}),e.jsxs(r,{className:"space-y-3",children:[e.jsx(t,{onClick:()=>{c.custom({type:"success",title:"Image downloaded",description:"Click to view in your downloads folder.",action:{label:"Open Folder",onClick:()=>{}}}),g(e=>e+1)},className:"w-full bg-chocolate hover:bg-chocolate/90 text-ivory",children:"With Action Button"}),e.jsx(t,{onClick:()=>{c.custom({type:"info",title:"Important message",description:"This notification will not auto-dismiss. Click the X to close it.",duration:0}),g(e=>e+1)},className:"w-full bg-chocolate hover:bg-chocolate/90 text-ivory",children:"Persistent (No Auto-dismiss)"}),e.jsx(t,{onClick:()=>{c.success("Quick message",void 0,2e3),g(e=>e+1)},className:"w-full bg-chocolate hover:bg-chocolate/90 text-ivory",children:"Qu

1ick (2s Duration)"}),e.jsx(t,{onClick:()=>{c.success("First notification","This is the first one"),setTimeout(()=>c.warning("Second notification","This is the second one"),300),setTimeout(()=>c.info("Third notification","This is the third one"),600),setTimeout(()=>c.error("Fourth notification","This one will be queued"),900),g(e=>e+4)},className:"w-full bg-chocolate hover:bg-chocolate/90 text-ivory",children:"Multiple Notifications"})]})]})]}),e.jsxs(i,{className:"bg-sand/30 border-2 border-chocolate/20",children:[e.jsx(a,{children:e.jsx(l,{className:"text-chocolate",children:"Key Features"})}),e.jsx(r,{children:e.jsxs("div",{className:"grid md:grid-cols-2 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("h3",{className:"font-semibold text-chocolate",children:"Design"}),e.jsxs("ul",{className:"text-sm text-chocolate/70 space-y-1",children:[e.jsx("li",{children:"✨ Glass-morphism effect with backdrop blur"}),e.jsx("li",{children:"🎨 Chocolate/sand/ivory color scheme"}),e.jsx("li",{children:"🎭 Smooth slide-in/out animations"}),e.jsx("li",{children:"📱 Fully responsive (mobile → desktop)"})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h3",{className:"font-semibold text-chocolate",children:"Functionality"}),e.jsxs("ul",{className:"text-sm text-chocolate/70 space-y-1",children:[e.jsx("li",{children:"⏱️ Auto-dismiss with progress bar"}),e.jsx("li",{children:"🔔 Stack up to 3 visible notifications"}),e.jsx("li",{children:"🎯 Custom action buttons"}),e.jsx("li",{children:"♿ Accessible (ARIA, keyboard)"})]})]})]})})]}),e.jsxs(i,{className:"bg-ivory border-2 border-chocolate/20",children:[e.jsx(a,{children:e.jsx(l,{className:"text-chocolate",children:"Usage Example"})}),e.jsx(r,{children:e.jsx("div",{className:"bg-chocolate/5 p-4 rounded-lg font-mono text-sm",children:e.jsx("pre",{className:"text-chocolate overflow-x-auto",children:"import { notify } from '@/hooks/use-glass-notification'\n\n// Simple notifications\nnotify.success('Success!', 'Operation completed')\nnotify.error('Error!', 'Something went wrong')\nnotify.warning('Warning!', 'Please be careful')\nnotify.info('Info', 'Did you know...')\n\n// With action button\nnotify.custom({\n  type: 'success',\n  title: 'Download complete',\n  description: 'Click to open',\n  action: {\n    label: 'Open File',\n    onClick: () => { /* ... */ }\n  }\n})\n\n// Custom duration or persistent\nnotify.success('Quick!', undefined, 2000)\nnotify.info('Stays!', 'Manual dismiss only', 0)"})})})]})]})]})}export{j as default};