<template>
  <template v-if="Object.keys(toastStore.toasts).length > 0">
    <teleport to="body">
      <div class="page-toast-w">
        <template v-for="(toast, i) in toastStore.toasts">
          <toast-item
            :type="toast.type"
            :id="toast.id"
            :timeout="toast.timeout"
            :text="toast.text" />
        </template>
      </div>
    </teleport>
  </template>
</template>
<script setup lang="ts">
  import ToastItem from './ToastItem.vue'
  import { useToastStore } from './toastStore'
  const toastStore = useToastStore()
</script>
