function Aee(){return r.jsxs(et,{title:"Snackbars",lead:"Snackbars provide brief feedback about an operation through a message at the bottom of the screen.",module:"@rmwc/snackbar",styles:["@material/snackbar/dist/mdc.snackbar.css","@material/button/dist/mdc.button.css","@material/ripple/dist/mdc.ripple.css"],docsLink:"https://material.io/develop/web/components/snackbars/",examples:Eee,children:[r.jsx(fe,{children:"Basic Usage"}),r.jsx(ce,{children:"You can render a snackbar in your UI and control its open state."}),r.jsx(j,{label:"Default",children:function(){const[t,n]=q.useState(!1);return r.jsxs(r.Fragment,{children:[r.jsx(Fo,{open:t,onClose:a=>n(!1),message:"This is a new message",dismissesOnAction:!0,action:r.jsx(Bo,{label:"Dismiss",onClick:()=>console.log("Click Me")})}),r.jsx(ye,{raised:!0,label:"Show snackbar",onClick:a=>n(!t)})]})}}),r.jsx(j,{label:"Start Aligned",children:function(){const[t,n]=q.useState(!1);return r.jsxs(r.Fragment,{children:[r.jsx(Fo,{open:t,onClose:a=>n(!1),message:"Start aligned, open until dismissed",stacked:!0,dismissesOnAction:!0,action:[r.jsx(Bo,{label:"Yeah!"}),r.jsx(Bo,{label:"No..."})],leading:!0,timeout:-1}),r.jsx(ye,{raised:!0,label:"Show start-aligned",onClick:a=>n(!t)})]})}}),r.jsx(j,{label:"With dismiss icon",children:function(){const[t,n]=q.useState(!1);return r.jsxs(r.Fragment,{children:[r.jsx(Fo,{open:t,onClose:a=>n(!1),message:"This is a new message",dismissesOnAction:!0,dismissIcon:"close",timeout:-1}),r.jsx(ye,{raised:!0,label:"Show snackbar",onClick:a=>n(!t)})]})}}),r.jsx(fe,{children:"Usage with SnackbarQueue"}),r.jsx(ce,{children:"While rendering the Snackbar inline works for simple cases, you'll likely have a notification system, or want to send notifications from anywhere in your app. The `SnackbarQueue` exists as a convenient interface for handling these cases and rendering the snackbar messages for you. If you've used the `DialogQueue`, the `SnackbarQueue` is very similar."}),r.jsx(ce,{children:"Setup is nice and easy, create a queue object you can pass around in your code base, pass the queues `messages` to the `SnackbarQueue` component, and then use the `notify` function to send notifications."}),r.jsx(j,{codeOnly:!0,children:`
        // Create a file that exports your queue
        // myQueue.js
        import { createSnackbarQueue } from '@rmwc/snackbar';

        export const queue = createSnackbarQueue();
      `}),r.jsx(j,{codeOnly:!0,children:`
        // Somewhere at the top level of your app
        // Render the SnackbarQueue
        import React from 'react';
        import { queue } from './myQueue';

        export default function App() {
          return (
            <div>
              ...
              <SnackbarQueue
                messages={queue.messages}
                // You can also pass default options to pass to your notifications
                // ie, make them all leading, stacked, etc
                leading
                stacked
              />
            </div>
          )
        }
        
      `}),r.jsx(ce,{children:"The `notify` function was designed to mimic the the built-in browser Notifications api and can accept most of the relevant options (icon, image, title, body, actions, ,etc). It also can accept any of the Snackbar props. Just import your queue, and call the notify method."}),r.jsx(j,{codeOnly:!0,children:`
        // Somewhere else in your app
        // Could be a view, your redux store, anywhere you want...
        import { queue } from './myQueue';

        // Simple example
        queue.notify({
          title: 'Hi there'
        });

        // With some features
        queue.notify({
          title: <b>Warning</b>,
          body: 'You have selected pizza instead icecream!',
          icon: 'warning',
          actions: [
            {
              // NotificationAction api format
              title: 'Fix It!',
              icon: 'close',
              action: 'fixit' // action will be available as evt.detail.reason in the onClose event
            },
            {
              // OR SnackbarActionProps format
              label: 'Continue...',
              icon: 'check',
              onClick: () => {}
            },
          ]
        });
      `}),r.jsx(j,{label:"Inline Example",children:()=>{const{messages:e,notify:t}=rD();function n(){return r.jsxs("div",{children:[r.jsx(ye,{label:"Notify",onClick:()=>t({title:r.jsx("b",{children:"Success"}),body:"You have selected pizza!",dismissesOnAction:!0,icon:"check",actions:[{title:"Dismiss"}]})}),r.jsx(iD,{messages:e})]})}return r.jsx(n,{})}}),r.jsx(nt,{src:Ree,components:[{displayName:"Snackbar",component:Fo},{displayName:"SnackbarAction",component:Bo}]})]})}
Any additional items will be passed to the
         child ListItem as props