54 lines
1.9 KiB
Vue
54 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
loading?: boolean;
|
|
totalCount: number;
|
|
unreadCount: number;
|
|
}
|
|
|
|
defineProps<Props>();
|
|
const emit = defineEmits<{
|
|
markAllRead: [];
|
|
clearAll: [];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="notification-header flex items-center justify-between mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="stats flex items-center gap-4">
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<span class="i-lucide-bell w-4 h-4 text-gray-400"></span>
|
|
<span class="text-gray-600">{{ totalCount }} notifications</span>
|
|
</div>
|
|
<div v-if="unreadCount > 0" class="flex items-center gap-2 text-sm">
|
|
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
|
|
<span class="text-primary font-medium">{{ unreadCount }} unread</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions flex items-center gap-2">
|
|
<button
|
|
v-if="unreadCount > 0"
|
|
@click="emit('markAllRead')"
|
|
:disabled="loading"
|
|
class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-primary
|
|
hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-2"
|
|
>
|
|
<span class="i-lucide-check-check w-4 h-4"></span>
|
|
Mark all read
|
|
</button>
|
|
<button
|
|
v-if="totalCount > 0"
|
|
@click="emit('clearAll')"
|
|
:disabled="loading"
|
|
class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-red-600
|
|
hover:bg-red-50 rounded-lg transition-colors flex items-center gap-2"
|
|
>
|
|
<span class="i-lucide-trash w-4 h-4"></span>
|
|
Clear all
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|