"use client";
import Link from "next/link";
import { Bell } from "lucide-react";
import { cn } from "@/lib/utils";
import { useNotificationUnreadCount } from "@/lib/notification-unread-store";
type NotificationNavLinkProps = {
variant?: "sidebar" | "header";
isActive?: boolean;
className?: string;
};
export function NotificationNavLink({
variant = "sidebar",
isActive = false,
className,
}: NotificationNavLinkProps) {
const unreadCount = useNotificationUnreadCount();
if (variant === "header") {
return (
0
? `Notifications, ${unreadCount} unread`
: "Notifications"
}
className={cn(
"relative inline-flex size-9 items-center justify-center rounded-lg border border-transparent text-[#101828] transition-colors",
"hover:bg-[#1d1d39]/5 hover:text-[#1d1d39]",
isActive && "bg-[#1d1d39] text-white hover:bg-[#1d1d39] hover:text-white",
className,
)}
>
{unreadCount > 0 ? (
{unreadCount > 99 ? "99+" : unreadCount}
) : null}
);
}
return (
{unreadCount > 0 ? (
) : null}
Notifications
{unreadCount > 0 ? (
{unreadCount > 99 ? "99+" : unreadCount}
) : null}
);
}