53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { formatTimeAgo } from '@vueuse/core'
|
|
import type { Notification } from '~/types'
|
|
|
|
const { isNotificationsSlideoverOpen } = useDashboard()
|
|
|
|
const { data: notifications } = await useFetch<Notification[]>('/api/notifications')
|
|
</script>
|
|
|
|
<template>
|
|
<USlideover
|
|
v-model:open="isNotificationsSlideoverOpen"
|
|
title="Notifications"
|
|
>
|
|
<template #body>
|
|
<NuxtLink
|
|
v-for="notification in notifications"
|
|
:key="notification.id"
|
|
:to="`/inbox?id=${notification.id}`"
|
|
class="px-3 py-2.5 rounded-md hover:bg-elevated/50 flex items-center gap-3 relative -mx-3 first:-mt-3 last:-mb-3"
|
|
>
|
|
<UChip
|
|
color="error"
|
|
:show="!!notification.unread"
|
|
inset
|
|
>
|
|
<UAvatar
|
|
v-bind="notification.sender.avatar"
|
|
:alt="notification.sender.name"
|
|
size="md"
|
|
/>
|
|
</UChip>
|
|
|
|
<div class="text-sm flex-1">
|
|
<p class="flex items-center justify-between">
|
|
<span class="text-highlighted font-medium">{{ notification.sender.name }}</span>
|
|
|
|
<time
|
|
:datetime="notification.date"
|
|
class="text-muted text-xs"
|
|
v-text="formatTimeAgo(new Date(notification.date))"
|
|
/>
|
|
</p>
|
|
|
|
<p class="text-dimmed">
|
|
{{ notification.body }}
|
|
</p>
|
|
</div>
|
|
</NuxtLink>
|
|
</template>
|
|
</USlideover>
|
|
</template>
|