<script>
  import Icon from "$/client/components/Icon.svelte";
  import Toasts from "$/client/components/Toasts.svelte";

  let orientation="bottom right";
  let toasts = [];
  let send_toast;
  let fade_after = 5000;
</script>

<span on:click={ () => send_toast(`New Toast ${ toasts.length }`) }><Icon name="plus" size="48" /></span>
<span on:click={ () => orientation = "bottom left" }><Icon name="arrow-down-left" size="48" /></span>
<span on:click={ () => orientation = "bottom right" }><Icon name="arrow-down-right" size="48" /></span>
<span on:click={ () => orientation = "top left" }><Icon name="arrow-up-left" size="48" /></span>
  <span on:click={ () => orientation = "top right" }><Icon name="arrow-up-right" size="48" /></span>

<input name="fade" placeholder="Fade Time (ms)" bind:value={ fade_after }>

<Toasts bind:toasts bind:send_toast orientation={ orientation } fade_after={ fade_after } />
