34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* NotificationBell — header affordance for signed-in users. Links to the
|
|
* /notifications page and shows a dot when there are unread items.
|
|
*
|
|
* The unread count is read from NotificationsProvider, which seeds it from
|
|
* the REST endpoint and keeps it live over the Soketi WebSocket. Visiting
|
|
* the page marks everything read and clears the badge.
|
|
*/
|
|
|
|
import Link from "next/link";
|
|
import { Bell } from "lucide-react";
|
|
import { useNotifications } from "@/components/notifications/notifications-provider";
|
|
|
|
export function NotificationBell() {
|
|
const { unread } = useNotifications();
|
|
|
|
return (
|
|
<Link
|
|
href="/notifications"
|
|
aria-label={
|
|
unread > 0 ? `Notifications (${unread} unread)` : "Notifications"
|
|
}
|
|
className="relative size-9 inline-flex items-center justify-center rounded-lg text-foreground hover:bg-muted transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<Bell className="size-5" />
|
|
{unread > 0 ? (
|
|
<span className="absolute top-1.5 right-1.5 size-2 rounded-full bg-primary ring-2 ring-background" />
|
|
) : null}
|
|
</Link>
|
|
);
|
|
}
|