drop/components/NotificationItem.vue

<template>
  <div class="pointer-events-auto w-full bg-zinc-950/40 rounded">
    <div class="p-4">
      <div class="flex items-start">
        <div class="w-0 flex-1 pt-0.5">
          <p class="text-sm font-medium text-zinc-100">
            {{ notification.title }}
          </p>
          <p class="mt-1 text-sm text-zinc-400 line-clamp-3">
            {{ notification.description }}
          </p>
          <div
            v-if="notification.actions.length > 0"
            class="mt-3 flex space-x-7"
          >
            <NuxtLink
              v-for="[name, link] in notification.actions.map((e) =>
                e.split('|'),
              )"
              :key="name"
              type="button"
              :href="link"
              class="rounded-md text-sm font-medium text-blue-600 hover:text-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
            >
              {{ name }}
            </NuxtLink>
          </div>
        </div>
        <div class="ml-4 flex shrink-0">
          <button
            type="button"
            class="inline-flex rounded-md text-zinc-400 hover:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
            @click="() => deleteMe()"
          >
            <span class="sr-only">{{ $t("common.close") }}</span>
            <XMarkIcon class="size-5" aria-hidden="true" />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { XMarkIcon } from "@heroicons/vue/24/solid";
import type { SerializeObject } from "nitropack";
import type { NotificationModel } from "~/prisma/client/models";

const props = defineProps<{
  notification: SerializeObject<NotificationModel>;
}>();

async function deleteMe() {
  await $dropFetch(`/api/v1/notifications/:id`, {
    method: "DELETE",
    params: {
      id: props.notification.id,
    },
  });
  const notifications = useNotifications();
  const indexOfMe = notifications.value.findIndex(
    (e) => e.id === props.notification.id,
  );
  // Delete me
  notifications.value.splice(indexOfMe, 1);
}
</script>