<script setup lang="ts">
import NotificationList from "@/components/notifications/NotificationList.vue";
import { PopoverButton } from "@headlessui/vue";
</script>

<template>
  <div class="pb-2 text-lg text-black">{{ $t("general.notification", 2) }}</div>
  <div class="border-t bg-white">
    <NotificationList :num-notifications-to-show="4" />
    <router-link to="/notifications">
      <PopoverButton
        class="btn-text inline-flex inline-flex items-center text-blue-900"
        data-cy="show-all-notifications"
      >
        <span>{{ $t("general.showAll") }}</span>
        <it-icon-arrow-right />
      </PopoverButton>
    </router-link>
  </div>
</template>
