elk/components/notification/NotificationCard.vue

<script setup lang="ts">
import type { Notification } from 'masto'

const { notification } = defineProps<{
  notification: Notification
}>()
</script>

<template>
  <article flex flex-col>
    <template v-if="notification.type === 'follow'">
      <div flex ml-4 items-center>
        <div i-ri:user-follow-fill mr-3 color-primary />
        <AccountInlineInfo :account="notification.account" mr1 />
        {{ $t('notification.followed_you') }}
      </div>
      <AccountCard :account="notification.account" p3 />
    </template>
    <template v-else-if="notification.type === 'follow_request'">
      <div flex ml-4 items-center>
        <div i-ri:user-follow-fill mr-3 />
        <AccountInlineInfo :account="notification.account" mr1 />
        {{ $t('notification.request_to_follow') }}
      </div>
      <!-- TODO: accept request -->
      <AccountCard :account="notification.account" p3 />
    </template>
    <template v-else-if="notification.type === 'favourite'">
      <div flex ml-4 items-center>
        <div i-ri:heart-fill mr-3 color-red />
        <AccountInlineInfo :account="notification.account" mr1 />
        {{ $t('notification.favourited_post') }}
      </div>
      <StatusCard :status="notification.status!" context="notifications" p3 />
    </template>
    <template v-else-if="notification.type === 'reblog'">
      <div flex ml-4 items-center>
        <div i-ri:repeat-fill mr-3 color-green />
        <AccountInlineInfo :account="notification.account" mr1 />
        {{ $t('notification.reblogged_post') }}
      </div>
      <StatusCard :status="notification.status!" context="notifications" p3 />
    </template>
    <template v-else-if="notification.type === 'update'">
      <div flex ml-4 items-center>
        <div i-ri:edit-2-fill mr-3 text-secondary />
        <AccountInlineInfo :account="notification.account" mr1 />
        {{ $t('notification.update_status') }}
      </div>
      <StatusCard :status="notification.status!" context="notifications" p3 />
    </template>
    <template v-else-if="notification.type === 'mention' || notification.type === 'poll' || notification.type === 'status'">
      <StatusCard :status="notification.status!" context="notifications" p3 />
    </template>
    <template v-else>
      <div text-red font-bold>
        [DEV] {{ $t('notification.missing_type') }} '{{ notification.type }}'
      </div>
    </template>
  </article>
</template>