import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
import { action } from '@storybook/addon-actions'
import BaseNotification from '@/elements/notification/BaseNotification.vue'
import BaseContent from '@/elements/content/BaseContent.vue'
import LinearLayout from '@/layouts/LinearLayout.vue'
import NotificationsLayout from '@/layouts/NotificationsLayout.vue'

<Meta title="Extra: Patterns|Notifications" />

# Notifications Patterns

<Preview>
  <Story name="Simple notification">
    {{
      components: { LinearLayout, BaseNotification, BaseContent, NotificationsLayout },
      template: 
        `<div style="background-color: lightgrey; width: 100vw; height: 100vh;">
          <base-content>Some page content content here</base-content>
          <notifications-layout>
            <base-notification>
                <base-content>Some message content here</base-content>
            </base-notification>
            <base-notification :error="true">
                <base-content>Some error content here</base-content>
            </base-notification>
          </notifications-layout>
        </div>`
    }}
  </Story>
</Preview>