@marianmeres/notifications playground and theme editor

<!--
  Code bellow is generated based on your settings. You can safely modify it by hand.
  Check docs for full list of supported theme vars.
  Install: npm i @marianmeres/notifications
-->

<script>
  import { createNotificationsStore } from '@marianmeres/notifications';
  import Notifications from '@marianmeres/notifications/Notifications.svelte';

  // create store instance (check docs for full list of factory options)
  const notifications = createNotificationsStore([], {
    maxCapacity: 4,
    sortOrder: 'asc',
  });
</script>

<button on:click={() => notifications.add("Hey ho, let's go!")}>Test</button>

<!--
  This component should be placed either:
    - just before closing </body> tag (with position="fixed" prop), or
    - just before closing tag of the parent (with position="absolute" prop, while parent
      being positioned "relative")

  If you just want to try it out without any customizations, this should just work:
  <Notifications {notifications} />
-->
<Notifications
  {notifications}
  position="fixed"
  posX="right"
  posXMobile="center"
  posY="top"
  posYMobile="bottom"
  wrapPadding="1rem 1rem"
  themeVars={{  }}
/>